Layout items in flexible columns with Masonry

2 08 2014

In one of my projects I needed to layout photos in a grid that will place all photos most effectively with no white spaces between them. The prolem is that photos can have various sizes and proportions.

The Masonry is a javascript library, easy to use that layouts items in columns. Here is how my site looks after applying Masonry:


In this case I used Masonry with:

– imagesLoaded to have callback when all images are loaded on a page

Unveil to lazy load images when they become visible on page

So sometimes it is a bit tricky, and its drawbacks may be observed – sometimes Masonry unfortunately does not layout items well. But it is quite hard to replicate, so I can recommend Masonry.



3 responses

9 08 2014 – volatile moments photography | Looks OK!

[…] made with HTML, CSS and JavaScript with few JS libraries like Unveil, Masonry, ImagesLoaded (read more here) and Google Analytics, not to mention jQuery :) CSS has media queries to make it responsive for […]

27 01 2016

Hi, any hint on how did you manage to implement Masonry with Unveil ? I am struggling to get to work them together :( Thanks!

27 01 2016
Jacek Milewski

Well it was hard so I switched to imagesLoaded. Now on imagesLoaded event callback I call Masonry:

var imgLoad = imagesLoaded( '#gallery', function() {
// console.log("applyingMsnry on imagesLoaded");
new Masonry( '#gallery' );

See how it works on

Give Your feedback:

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: