@regru/masonry
v3.2.2
Published
Cascading grid layout library
Downloads
44
Readme
Masonry
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,
Install
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
Initialize
In JavaScript
var container = document.querySelector('#container');
var msnry = new Masonry( container, {
// options...
itemSelector: '.item',
columnWidth: 200
});
In HTML
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>
License
Masonry is released under the MIT license. Have at it.
Copyright :copyright: 2014 David DeSandro