Introduction

Isotope: An exquisite jQuery plugin for magical layouts

Features

Licensing

Commercial use of Isotope requires purchase of one-time license fee per developer seat. Commercial use includes any application that makes you money — portfolio sites, premium templates, etc. Commercial licenses may be purchased at metafizzy.co.

Use in non-commercial and personal applications is free.

Getting started

Isotope requires jQuery 1.4.3 and greater.

Markup

Isotope works on a container element with a group of similar child items.

<div id="container">
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  ...
</div>

Script

$('#container').isotope({
  // options
  itemSelector : '.item',
  layoutMode : 'fitRows'
});

See Demo: Basic

There are a number of options you can specify. Within the options is where you can set the layout mode, filter items, and sort items.

Additionally you can specify a callback after the options object. This function will be triggered after the animation has completed.

$('#container').isotope({ filter: '.my-selector' }, function( $items ) {
  var id = this.attr('id'),
      len = $items.length;
  console.log( 'Isotope has filtered for ' + len + ' items in #' + id );
});

Within this callback this refers to the container, and $items refers to the item elements. Both of these are jQuery objects and do not need to be put in jQuery wrappers.

CSS

Add these styles to your CSS for filtering, animation with CSS transitions, and adding items.

/**** Isotope Filtering ****/

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:         top, left, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}

Code repository

This project lives on GitHub at github.com/desandro/isotope. There you can grab the latest code and follow development.

A word about moderation

Isotope enables a wealth of functionality. But just because you can take advantage of its numerous features together, doesn’t mean you necessarily should. For each each feature you implement with Isotope, consider the benefit gained by users, at the cost of another level of complexity to your interface.

Acknowledgments