Filter & sort magical layouts http://isotope.metafizzy.co

David DeSandro 6175f773a2 move sorting logic out of item and into isotope.js		11 years ago
examples	move sorting logic out of item and into isotope.js	11 years ago
layout-modes	no need to delete resizeTimeout	11 years ago
test	get sort data test	11 years ago
.gitignore	bower components	11 years ago
.jshintrc	fit rows layout mode working	11 years ago
.tm_properties	add textmate properties	13 years ago
CONTRIBUTING.mdown	burn down v1 and start on v2	11 years ago
README.mdown	burn down v1 and start on v2	11 years ago
bower.json	sub-class Masonry. Baller status. 😎	11 years ago
isotope.js	move sorting logic out of item and into isotope.js	11 years ago
item.js	move sorting logic out of item and into isotope.js	11 years ago
layout-mode.js	comment fix	11 years ago
notes.md	move sorting logic out of item and into isotope.js	11 years ago

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 licensed MIT. Have at it.