Filter & sort magical layouts
See isotopejs.com for complete docs and demos.
A packaged source file includes everything you need to use Isotope.
If you are cool with the command line...
Install with Bower: bower install isotope
Install with npm: npm install isotope-layout
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.
// 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
}
});Add a class of js-isotope to your element. Options can be set in JSON in data-isotope-options.
<div id="container" class="js-isotope"
data-isotope-options='{ "itemSelector": ".item", "masonry": { "columnWidth": 200 } }'>
<div class="item"></div>
<div class="item"></div>
...
</div>CodersClan has a dedicated support forum for Isotope, where you can get personal support from experienced developers.
By Metafizzy