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:
GitHub:
https://github.com/metafizzy/isotope
Tutorial about using isotope plug-in:
http://www.9bitstudios.com/2013/04/jquery-isotope-tutorial
Enjoy stable isotope!