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

David DeSandro f71975d0be add CommonJS exports		10 years ago
dist	tick version v2.0.1; build dist files	10 years ago
js	add CommonJS exports	10 years ago
sandbox	Add gutter option to fitRows; Fixes #580	10 years ago
test	fix updateSortData with empty array, or jQ object	10 years ago
.gitignore	add Grunt file from isotope docs	11 years ago
.jshintrc	add CommonJS exports	10 years ago
.tm_properties	build dist/ file with Grunt	11 years ago
CONTRIBUTING.mdown	add Support and Pull requests to contrib;	11 years ago
Gruntfile.js	build dist/ file with Grunt	11 years ago
README.mdown	just link to site	11 years ago
bower.json	update dependencies in bower.json	10 years ago
changelog.md	add changelog	10 years ago
package.json	tick version v2.0.1; build dist files	10 years ago

README.mdown

Isotope

Filter & sort magical layouts

See isotopejs.com for complete docs and demos.

Install

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

Bower

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

bower install isotope

License

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

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

// vanilla JS
var container = document.querySelector('#container');
var iso = new Isotope( container, {
  // 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>

Support

CodersClan has a dedicated support forum for Isotope, where you can get personal support from experienced developers.

Get support on CodersClan

By Metafizzy