Filter & sort magical layouts http://isotope.metafizzy.co
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

56 lines
1.3 KiB

# 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](http://masonry.desandro.com) or [masonryjs.com](http://masonryjs.com) if you're lazy,
## Install
A packaged source file includes everything you need to use Masonry.
+ [masonry.pkgd.min.js](http://masonry.desandro.com/masonry.pkgd.min.js)
+ [masonry.pkgd.js](http://masonry.desandro.com/masonry.pkgd.js)
### Bower
If you are cool with the command line, install Masonry as a [Bower](http://bower.io) package:
``` bash
bower install masonry
```
## Initialize
### In JavaScript
``` js
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`.
``` html
<div class="js-masonry" data-masonry-options='{ "itemSelector": ".item", "columnWidth": 200 }'>
<div class="item"></div>
<div class="item"></div>
...
</div>
```
## License
Masonry is licensed MIT. Have at it.
* * *
Copyright (c) 2013 David DeSandro