O'Reilly logo

Instant jQuery Masonry How-to by Kyle David Taylor

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required