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

David DeSandro 1abc3b7e5b magic method notes		11 years ago
examples	move js to js/	11 years ago
js	add .magic() method	11 years ago
test	add .magic() method	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	README Masonry -> Isotope	11 years ago
bower.json	test filtering	11 years ago
notes.md	magic method notes	11 years ago

README.mdown

Isotope

Filter and sort magical layouts

See isotopejs.com for complete docs and demos.

Install

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

TBD

Bower

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

bower install isotope

Isotope

Isotope may be used in commercial projects and applications with the one-time purchase of a commercial license. If you are paid to do your job, and part of your job is implementing Isotope, a commercial license is required.

http://isotope.metafizzy.co/license.html

For non-commercial, personal, or open source projects and applications, you may use Isotope under the terms of the GPL v3 License. You may use Isotope for free.

Initialize

In JavaScript

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

Or with jQuery

$('#container').isotope({
  // options...
  itemSelector: '.item',
  masonry: {
    columnWidth: 200
  }
});

In HTML

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

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