heimrichhannot/masonry

Cascading grid layout library

Masonry

Abandoned! See heimrichhannot-contao-components/masonry, _(*1)

Cascading grid layout library, _(*2)

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., _(*3)

See masonry.desandro.com for complete docs and demos., _(*4)

Install

Download

• masonry.pkgd.js un-minified, or
• masonry.pkgd.min.js minified

CDN

Link directly to Masonry files on npmcdn., _(*5)

``` html , <sub>(*6)</sub>

### Package managers

Bower: `bower install masonry --save`

[npm](https://www.npmjs.com/package/masonry-layout): `npm install masonry-layout --save`

## Initialize

With jQuery

``` js
$('.grid').masonry({
  // options...
  itemSelector: '.grid-item',
  columnWidth: 200
});

With vanilla JavaScript, <sub>(*7)</sub>

``` js // vanilla JS // init with element var grid = document.querySelector('.grid'); var msnry = new Masonry( grid, { // options... itemSelector: '.grid-item', columnWidth: 200 });, <sub>(*8)</sub>

// init with selector var msnry = new Masonry( '.grid', { // options... });, <sub>(*9)</sub>

With HTML

Add a `data-masonry` attribute to your element. Options can be set in JSON in the value.

``` html
<div class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 200 }'>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  ...
</div>

License

Masonry is released under the MIT license. Have at it., <sub>(*10)</sub>

Made by David DeSandro, <sub>(*11)</sub>