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

David DeSandro 966a247c7a tick version		11 years ago
examples	reference this.isotope in LayoutMode.layout	11 years ago
js	tick version	11 years ago
test	isJQueryFiltering: true by default	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	tick version	11 years ago
notes.md	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>