Instant jQuery Masonry How-to

Using Masonry with images (Intermediate)

We often use images when building websites, so it's no surprise that we would like to use them in conjunction with Masonry. To avoid the common issue of the Masonry elements not aligning correctly when the dimensions of the images are not available when Masonry initially runs, we need to wait until the images have finished loading before applying Masonry. Luckily, Masonry comes shipped with a plugin called imagesLoaded for image support. We use imagesLoaded to wait for the images to finish loading, after which we need to let Masonry measure the images properly.

Getting ready

In the code bundle for this book, open the 3-images-loaded.html file in your preferred text editor to follow along.

How to do it...

In this example, we are only working with images, so we only need to set our gutters in CSS.
```
<style>
  .masonry-item {
    margin: 5px;
    float: left;
  }
</style>
```
Tip
Downloading the example code
You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
We need to set up some images, so I'm going to use an image placeholder service called LoremPixel. This allows us to dynamically insert dummy images of whatever size and proportion we need. The images I will be using have three arguments after the base URL. The first argument is the width of the image, the second is the height of the image, and the third is the category of the image. The category is optional.
```
<div id="masonry-container">
  <div class="masonry-item">
    <img src="http://lorempixel.com/250/250/technics" alt="random" />
  </div>
  <div class="masonry-item">
    <img src="http://lorempixel.com/250/350/technics" alt="random" />
  </div>
  <div class="masonry-item">
    <img src="http://lorempixel.com/250/450/technics" alt="random" />
  </div>
</div>
```
Note
The images used above are loaded in by an image placeholder service called LoremPixel (http://www.lorempixel.com). This allows us to insert test data without needing any actual files in our directory. All images used are licensed under the Creative Commons license (CC BY-SA).

To use imagesLoaded, we need to first wrap the Masonry container in a jQuery object, after which we can apply imagesLoaded and Masonry actions to the container object.

<script>
  $container = $('#masonry-container');
  $container.imagesLoaded(function() {
    $container.masonry({
      itemSelector : '.masonry-item'
    });
  });
</script>

How it works...

The imagesLoaded plugin works by waiting until all the images have been loaded by the browser and then triggering Masonry. The result should look like the following screenshot:

If you do not use the imagesLoaded plugin, you will notice that the images load on top of each other in the same corner in the browser, as shown in the next screenshot. This is because Masonry was running before the images loaded completely, so it tries to organize a set of empty elements it doesn't know the size of. When imagesLoaded is used with Masonry, the script waits until all of the images have been loaded before triggering Masonry.

There's more…

There are some other alternatives to using the imagesLoaded plugin. For instance, we can assign each image a width and height property using the inline dimensions. Once these values are assigned to the elements, Masonry determines their spacing. Depending on how the site is being built, it might be tedious to ensure that all those image elements have height and width properties assigned.

The last alternative is to use $(window).load(). While this method isn't particularly efficient, as it can result in a potentially longer wait time, it does work; it waits until all the assets (such as images and media) are loaded into the window before triggering Masonry.

<script>
  $(window).load(function() {
    $('#masonry-container').masonry({
      itemSelector : '.masonry-item',
    });
  });
</script>

Tech Concepts

Programming languages

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

By : Kyle David Taylor

Instant jQuery Masonry How-to

By: Kyle David Taylor

Overview of this book