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

David DeSandro 6c8afa35c1 Merge branch 'v2' of github.com:desandro/isotope into v2		11 years ago
examples	Merge branch 'v2' of github.com:desandro/isotope into v2	11 years ago
js	insert only transitions reveal for new items	11 years ago
test	cells-by-row asset in test	11 years ago
.gitignore	require js example code	11 years ago
.jshintrc	remove console.log; devel: false	11 years ago
.tm_properties	exclude bower_components in .tm_properties	11 years ago
CONTRIBUTING.mdown	burn down v1 and start on v2	11 years ago
README.mdown	README Masonry -> Isotope	11 years ago
bower.json	move other layout mode out as separate libs	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>