- Install
- Download
- CDN
- Package managers
- Getting started
- HTML
- CSS
- Initialize with jQuery
- Initialize with Vanilla JavaScript
- Initialize in HTML
- Next
- MIT License
Install
Download
- masonry.pkgd.min.js minified, or
- masonry.pkgd.js un-minified
CDN
Link directly to Masonry files on unpkg.
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script><!-- or --><script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>Package managers
Install with Bower: bower install masonry --save
Install with npm: npm install masonry-layout
Getting started
HTML
Include the Masonry .js file in your site.
<script src="/path/to/masonry.pkgd.min.js"></script>Masonry works on a container grid element with a group of child items.
<div class="grid"> <div class="grid-item">...</div> <div class="grid-item grid-item--width2">...</div> <div class="grid-item">...</div> ...</div>CSS
All sizing of items is handled by your CSS.
.grid-item { width: 200px; }.grid-item--width2 { width: 400px; }Initialize with jQuery
You can use Masonry as a jQuery plugin: $('selector').masonry().
$('.grid').masonry({ // options itemSelector: '.grid-item', columnWidth: 200});Initialize with Vanilla JavaScript
You can use Masonry with vanilla JS: new Masonry( elem, options ). The Masonry() constructor accepts two arguments: the container element and an options object.
var elem = document.querySelector('.grid');var msnry = new Masonry( elem, { // options itemSelector: '.grid-item', columnWidth: 200});// element argument can be a selector string// for an individual elementvar msnry = new Masonry( '.grid', { // options});Initialize in HTML
You can initialize Masonry in HTML, without writing any JavaScript. Add data-masonry attribute to the container element. Options can be set in its value.
<div class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 200 }'>Options set in HTML must be valid JSON. Keys need to be quoted, for example "itemSelector":. Note the value of data-masonry is set with single quotes ', but JSON entities use double-quotes ".
HTML initialization was previously done with a class of js-masonry and setting options in data-masonry-options in Masonry v3. Masonry v4 is backwards compatible with this code.
<div class="grid js-masonry" data-masonry-options='{ "itemSelector": ".grid-item", "columnWidth": 200 }'>Next
Learn more about how to use Masonry:
MIT License
Masonry is released under the MIT License. Have at it.
