Skip to content
This repository

Cascading grid layout library

README.mdown

Masonry

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.

For complete docs and demos, see masonry.desandro.com or masonryjs.com if you're lazy,

Install

A packaged source file includes everything you need to use Masonry.

Bower

If you are cool with the command line, install Masonry as a Bower package:

bower install masonry

Initialize

In JavaScript

var container = document.querySelector('#container');
var msnry = new Masonry( container, {
  // options...
  itemSelector: '.item',
  columnWidth: 200
});

In HTML

Add a class of js-masonry to your element. Options can be set in JSON in data-masonry-options.

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

License

Masonry is released under the MIT license. Have at it.


Copyright :copyright: 2014 David DeSandro

Something went wrong with that request. Please try again.