Masonry.js is an open-source jQuery-plugin for creating horizontal "masonry" layout. It has been written with following goals in mind:
- as small footprint as possible
- as little configuration as possible
- horizontal layout for better support for lazy-loading
- cross-browser compatible
- responsive design
There are a few requirements in terms of markup:
- All img-tags have to be wrapped in a common container (ie. div)
- Img-tags must have width and height attributes defined with preferably correct values
Javascript:
$(document).ready(function() {
$('div#masonry').masonry({rowMinAspectRatio: 3.3});
});
Markup:
<div id="masonry">
<a href="image01-large.jpg" target="_blank"><img src="image-01.jpg" width="2048" height="1369"/></a>
<a href="image02-large.jpg" target="_blank"><img src="image02.jpg" width="2048" height="1280"/></a>
...
<a href="image99-large.jpg" target="_blank"><img src="image99.jpg" width="1370" height="2048 /></a>
</div>
To set borders use css:
<style>
box-sizing: border-box;
border: 2px solid #fff;
</style>
See it in action here working in combination with Lazy Load Plugin.
This software is MIT licensed.
Project homepage is here: https://www.strobotti.com/en/project/masonry