jQuery Isotope plugin – filter & sort, responsive magical layouts

Nice way to display data at your website as nice, responsive grid with adapting possibilities.

jQuery Isotope plugin in action

Filter & sort, responsive magical layouts!

Usage

We can link directly to Isotope files on cdnjs:

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script>

or use package managers:

Bower: bower install isotope –save

npm: npm install isotope-layout –save

Initialize

With jQuery:

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

With vanilla JavaScript:

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

With HTML:

=> jdd a class of js-isotope to your element. Options can be set as JSON in data-isotope-options:

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

License

There is open source license available, if you are creating an open source application under a license compatible with the GNU GPL license v3, you may use Isotope under the terms of the GPLv3.

If you want to use Isotope to develop commercial sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary. Purchase a Isotope Commercial License at isotope.metafizzy.co.

Project homepage:

http://isotope.metafizzy.co

GitHub:

https://github.com/metafizzy/isotope

Tutorial about using isotope plug-in:

http://www.9bitstudios.com/2013/04/jquery-isotope-tutorial

Enjoy stable isotope!