Cascading grid layout library
Masonry works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet.
For complete docs and demos, see masonry.desandro.com or masonryjs.com if you're lazy.
A packaged source file includes everything you need to use Masonry.
Or, if you're cool with the command line...
Install with Bower: bower install masonry
Install with npm npm install masonry-layout
var container = document.querySelector('#container');
var msnry = new Masonry( container, {
// options...
itemSelector: '.item',
columnWidth: 200
});Add a class of js-masonry to your element. Options can be set in JSON in data-masonry-options.
<div class="js-masonry" data-masonry-options='{ "itemSelector": ".item", "columnWidth": 200 }'>
<div class="item"></div>
<div class="item"></div>
...
</div>Masonry is released under the MIT license. Have at it.
Copyright ©️ 2015 David DeSandro