- Install
- Download
- CDN
- Package managers
- Getting started
- HTML
- CSS
- Initialize with jQuery
- Initialize with Vanilla JavaScript
- Initialize in HTML
- Next
- MIT License
- Twitter updates
Install
Download
- masonry.pkgd.min.js minified, or
- masonry.pkgd.js un-minified
CDN
Link directly to Masonry files on cdnjs.
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.js"></script>
<!-- or -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.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 element
var msnry = new Masonry( '.grid', {
// options
});
Initialize in HTML
You can initialize Masonry in HTML, without writing any JavaScript. Add js-masonry
to the class of the container element. Options can be set with a data-masonry-options
attribute.
<div class="grid js-masonry"
data-masonry-options='{ "itemSelector": ".grid-item", "columnWidth": 200 }'>
Options set in HTML must be valid JSON. Keys need to be quoted, for example "itemSelector":
. Note the HTML attribute data-masonry-options
is set with single quotes '
, but JSON entities use double-quotes "
.
Next
Learn more about how to use Masonry:
MIT License
Masonry is released under the MIT License. Have at it.