Plugin: Isotope

HTML and CSS

Isotope (https://isotope.metafizzy.co/) is a jQuery plugin that allows us to create brick wall-like layouts based on a set of inconsistently-sized images. If the images happen to be a mix of portrait or landscape photographs, Isotope will automatically arrange those images to maximize the available screen real estate.

First, let us simulate such a situation using the HTML below (to replace [Photo Gallery]):

Note that a few .box items have an additional class name called high. This class name will force the respective items to be in a different size. Refer to the CSS snippet below:

The result isn't satisfactory yet: each box (greedily) takes up the entire horizontal space, and it is time for us to activate Isotope. Simply visit https://cdnjs.com/libraries/jquery.isotope to connect either path to your fiddle, and simply add an attribute to your original "layout" container:

You will be able to see that the boxes now intelligently arrange themselves:

Inserting images

With the boxes in place, we can use background-image to replace these solid blocks with photographs. Make a few adjustments to the CSS code and proceed with implementing placeholder images:

We now have a competent photo gallery based on a competent packing algorithm:

Screencast Recording

https://www.dropbox.com/scl/fi/uy45cyewmfkvcbkoeck7a/Page-3.mov?rlkey=qt2y0srmxdnvovoh21lnsog2w&dl=0