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.
See masonry.desandro.com for complete docs and demos.
- masonry.pkgd.js un-minified, or
- masonry.pkgd.min.js minified
Link directly to Masonry files on cdnjs.
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.1/masonry.pkgd.js"></script> <!-- or --> <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.1/masonry.pkgd.min.js"></script>
Bower: bower install masonry --save
npm: npm install masonry-layout --save
With jQuery
$('.grid').masonry({ // options... itemSelector: '.grid-item', columnWidth: 200 });
With vanilla JavaScript
// vanilla JS var grid = document.querySelector('.grid'); var msnry = new Masonry( grid, { // options... itemSelector: '.grid-item', columnWidth: 200 });
With HTML
Add a class of js-masonry to your element. Options can be set in JSON in data-masonry-options.
<div class="grid js-masonry" data-masonry-options='{ "itemSelector": ".grid-item", "columnWidth": 200 }'> <div class="grid-item"></div> <div class="grid-item"></div> ... </div>
Masonry is released under the MIT license. Have at it.
Copyright 2015 David DeSandro