Flexbox gird image gallery

Flexbox gird image gallery, full width, even height, responsive

by Oski Krawczyk

HTML

<div class="galleryCard">
  <div class="galleryContainer" 
    data-images-set="streetmeetwarsaw-photo-walk-1" 
    data-images-from="3"
    data-images-to="10">
  </div>
</div>

<div class="galleryCard">
  <div class="galleryContainer" 
    data-images-set="dext-whats-extreme-for-you" 
    data-images-from="1"
    data-images-to="10">
  </div>
</div>

CSS

.galleryContainer {
  display: flex;
  flex-direction: column;
  max-width: 1040px;
  width: 100vw;
}

.galleryRow {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.galleryImage img {
  display: block;
  margin: 0;
  width: 100%;
  height: 100%;
}


.galleryRow:not(:first-of-type) {
    margin: 1px 0 0 0;
}

.galleryImage:not(:first-of-type) {
    margin: 0 0 0 1px;
}

JavaScript

const MAX_IMG_PER_ROW = 3

let buildStructure = function buildStructure(gallery){
    let rows    = []
    let row     = 0
    let counter = 0
		let from = parseInt(gallery.dataset.imagesFrom)
  	let to   = parseInt(gallery.dataset.imagesTo)
  	let set  = gallery.dataset.imagesSet

    
    for (var i = from; i < to; i++){
      if (counter === MAX_IMG_PER_ROW){
        row = row + 1
        counter = 0
      }

      counter = counter + 1

      if (!rows[row]){
        rows[row] = []
      }
      
      let paddedImageIndex = (i).toString().padStart(2, "0")

      rows[row].push({
      	src: `http://byteal.pl/public/images/projects/${set}/slides/${paddedImageIndex}.jpg`
      })
    }
    return rows
}

let galleries = document.querySelectorAll(".galleryContainer")

galleries.forEach(function(gallery, index){
  let rows = buildStructure(gallery)
  
  rows.forEach((row) => {
    let rowDiv = document.createElement("div")
    rowDiv.setAttribute("class", "galleryRow")

    row.forEach((image) => {
      let imgDiv = document.createElement("div")
      imgDiv.setAttribute("class", "galleryImage")

      let img = document.createElement("img")
      img.setAttribute("src", image.src)

      let tempImage = new Image()
      tempImage.src = image.src
      tempImage.addEventListener("load", function(){
        let ratio = this.naturalWidth / this.naturalHeight
        
        imgDiv.style.flex = ratio
        imgDiv.appendChild(img)
        rowDiv.appendChild(imgDiv)
      })
    })

    gallery.appendChild(rowDiv)
  })
})