Cascading grid layout library
npm install masonry-layout_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 unpkg.
`` html`
npm: npm install masonry-layout --save
Bower: bower install masonry-layout --save
Masonry has been actively maintained and improved upon for 8 years, with 900 GitHub issues closed. Please consider supporting its development by purchasing a license for one of Metafizzy's commercial libraries.
With jQuery
` js`
$('.grid').masonry({
// options...
itemSelector: '.grid-item',
columnWidth: 200
});
With vanilla JavaScript
` js
// vanilla JS
// init with element
var grid = document.querySelector('.grid');
var msnry = new Masonry( grid, {
// options...
itemSelector: '.grid-item',
columnWidth: 200
});
// init with selector
var msnry = new Masonry( '.grid', {
// options...
});
`
With HTML
Add a data-masonry attribute to your element. Options can be set in JSON in the value.
` html``
...
Masonry is released under the MIT license. Have at it.
*
Made by David DeSandro