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.
 
 
 
David DeSandro cb8aaeb589 add Isotope._modeMethod 11 years ago
examples add layout-mode.js 11 years ago
layout-modes add layout-mode.js 11 years ago
test burn down v1 and start on v2 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 bower components 11 years ago
isotope.js add Isotope._modeMethod 11 years ago
item.js add notes; rearrange item.js 11 years ago
layout-mode.js add Isotope._modeMethod 11 years ago
notes.md add layout-mode.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.


Copyright (c) 2013 David DeSandro