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.
Looks OK! 
Hi, any hint on how did you manage to implement Masonry with Unveil ? I am struggling to get to work them together :( Thanks!
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 karomile.com