- Plugin: Isotope

Plugin: Isotope


Isotope ( 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 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