Adaptive Image Gallery With Masonry Grid Layout

Preview:

Description:

A lightweight photo gallery that showcases your images in a responsive Masonry grid layout.

It leverages JavaScript to detect screen size and reorder gallery elements accordingly. Images are arranged in a flexible grid with evenly-spaced columns.

As you resize your browser, the gallery automatically transitions between column layouts (from 4 rows on wide screens to 1 row on mobile).

This responsive behavior ensures images are legible and effectively displayed without stretching or overflow issues.

The script automatically handles adjustments, so you don’t have to write media queries. Just plug in your images and let the gallery work its magic.

How to use it:

1. Create an empty DIV container for the gallery.

<div id="gallery"></div>

2. The necessary CSS styles.

img {
  display: block;
  width: 100%;
  padding-bottom: 10px;
}
#gallery {
  display: flex;
  justify-content: space-around;
  gap: 10px;
}
#gallery div {
  flex: 1;
}

3. Add your images to the gallery.

const images = [
  image1 = {
    src: "1.jpg",
    alt: "First image",
    w: 2256,
    h: 1504,
  },
  image2 = {
    src: "2.jpg",
    alt: "Second image",
    w: 1504,
    h: 1840,
  },
  image3 = {
    src: "3.jpg",
    alt: "Third image",
    w: 1688,
    h: 1592,
  },
  // more images here
];

4. Declare initial global variables.

let columnHeights; 
let columnStrings;

5. Set the number of columns based on the current screen size.

function updateNumOfColumns() {
  if (window.innerWidth < 600) {
    columnHeights = Array(1).fill(0);
    columnStrings = Array(1).fill("");
  } else if (window.innerWidth < 1200) {
    columnHeights = Array(3).fill(0);
    columnStrings = Array(3).fill("");
  } else {
    columnHeights = Array(4).fill(0);
    columnStrings = Array(4).fill("");
  }
  setGallery();
}

6. Add each image to the column with the shortest height.

function addImagesToColumns(img) {
  let shortestColumn = columnHeights.indexOf(Math.min(...columnHeights));
  let imageHeight = (img.h / img.w) * 100;
  columnStrings[shortestColumn] += `<img src="${img.src}" alt="${img.alt}" title="${img.alt}" />`;
  columnHeights[shortestColumn] += imageHeight;
}

7. Combine the column html code and insert into the DOM.

function setGallery() {
  images.forEach(addImagesToColumns);
  let galleryHTML = "";
  for (var i = 0; i < columnStrings.length; i++) {
    galleryHTML += `<div>${columnStrings[i]}</div>`;
  }
  document.getElementById("gallery").innerHTML = galleryHTML;
}

8. Update the number of columns on page init/resize.

// Initial set up of columns on page load
updateNumOfColumns();
// Add event listener for window resize
window.addEventListener('resize', updateNumOfColumns);

Changelog:

02/26/2024

• Updated code