Isotope v2 beta (back to V1)

Changes from Isotope v1. Report any issues with Isotope v2. Thanks for being brave!

Appendix

imagesLoaded

Unloaded images can throw off Isotope layouts and cause item elements to overlap. imagesLoaded resolves this issue. imagesLoaded works by triggering a callback after all child images have been loaded.

// initialize Isotope after all images have loaded  
var $container = $('#container').imagesLoaded( function() {
  $container.isotope({
    // options
  });
});
// or with vanilla JS
var container = document.querySelector('#container');
var iso;
// initialize Isotope after all images have loaded
imagesLoaded( container, function() {
  iso = new Isotope( container {
    // options
  });
});

Or initialize Isotope first, then trigger layout after images have loaded.

// initialize Isotope
var $container = $('#container').isotope({
  // options
});
// layout Isotope again after all images have loaded
$container.imagesLoaded( function() {
  $container.isotope('layout');
});
// or with vanilla JS
// initialize Isotope
var iso = new Isotope( container, {
  // options
});
// layout Isotope again after all images have loaded
imagesLoaded( container, function() {
  iso.layout();
});

Web fonts

Like images, unloaded web fonts can throw off Isotope. To resolve this, trigger layout after fonts have been loaded. Both Typekit and Google WebFont Loader provide font events to control scripts based on how fonts are loaded.

Typekit

Try the script below when using Isotope on a page with Typekit. This will trigger Isotope when the document is ready and again when fonts have loaded. Be sure to remove Typekit’s default script, try{Typekit.load();}catch(e){}.

var $container;

function triggerIsotope() {
  // don't proceed if $container has not been selected
  if ( !$container ) {
    return;
  }
  // init Isotope
  $container.isotope({
    // options
  });
}
// trigger Isotope on document ready
$(function(){
  $container = $('#container');
  triggerIsotope();
});
// trigger Isotope when fonts have loaded
Typekit.load({
  active: triggerIsotope,
  inactive: triggerIsotope
});
// or with vanilla JS
var container, iso;

function triggerIsotope() {
  // don't proceed if doc isn't ready
  if ( !container ) {
    return;
  }
  // init Isotope
  iso = new Isotope( container, {
    // options
  });
}
// initialize Isotope on document ready
docReady( function() {
  var container = document.querySelector('#container');
  triggerIsotope();
});
// trigger Isotope when fonts have loaded
Typekit.load({
  active: triggerIsotope,
  inactive: triggerIsotope
});

Upgrading from v1

New features

Changes

Upgrades to masonry layout mode

RequireJS

Isotope is compatible with RequireJS.

You can require isotope.pkgd.js. It provides a named module isotope/js/isotope, which will need to be required as well.

requirejs( [
  // require the file
  'path/to/isotope.pkgd.js',
  // require the named module
  'isotope/js/isotope'
  // two parameters, isotopePkg is undefined
  // Isotope is the working module
], function( isotopePkg, Isotope ) {
  var iso = new Isotope( '#container', {...});
});

Or, you can manage dependencies with Bower. Set baseUrl to bower_components and set a path config for all your application code.

requirejs.config({
  baseUrl: 'bower_components/',
  paths: {
    app: '../'
  }
});

requirejs( [
  'isotope/js/isotope',
  'app/my-component.js'
], function( Isotope, myComp ) {
  var iso = new Isotope( '#container', {...});
});

RequireJS and jQuery

To use Packery with jQuery via RequireJS, require jquery-bridget/jquery.bridget:

requirejs.config({
  // change base_path to bower_components
  baseUrl: '../bower_components/',
  // add path config for jQuery
  paths: {
    jquery: 'jquery/jquery'
  }
});

// require jQuery bridget, which will enable $.fn.isotope
requirejs( [
    'jquery-bridget/jquery.bridget',
    'isotope/js/isotope'
  ],
  function() {
    var $ = window.jQuery
    $('#container').isotope({...});
  }
);

Animating item size

You cannot transition or animate the size of an item element and properly lay out. But there is a trick — you can animate a child element of the item element.

<div class="isotope">
  <!-- items have item-content children element -->
  <div class="item">
    <div class="item-content"></div>
  </div>
  ...
/* item is invisible, but used for layout
item-content is visible, and transitions size */
.animate-item-size-demo .item,
.animate-item-size-demo .item-content {
  width: 60px;
  height: 60px;
}
.animate-item-size-demo .item-content {
  background: #09D;
  transition: width 0.4s, height 0.4s;
  /* -webkit-transition -moz, etc, too */
}
/* both item and item content change size */
.animate-item-size-demo .item.is-expanded,
.animate-item-size-demo .item.is-expanded .item-content {
  width: 180px;
  height: 120px;
}

Click to item to toggle size

This technique works on items with responsive, percentage widths. Although, it does require a bit more JS. Check out the example on CodePen to see how it’s done.

#animate-item-size-responsive .item {
  width: 20%;
  height: 60px;
}

#animate-item-size-responsive .item-content {
  width:  100%;
  height: 100%;
  background: #09D;
  -webkit-transition: width 0.4s, height 0.4s;
     -moz-transition: width 0.4s, height 0.4s;
       -o-transition: width 0.4s, height 0.4s;
          transition: width 0.4s, height 0.4s;
}
/* item has expanded size */
#animate-item-size-responsive .item.is-expanded {
  width: 60%;
  height: 120px;
}

Click to item to toggle size

Component libraries

Isotope includes several component libraries. You might have seen these used in the example code. You can use some of these libraries in your own code.

docReady

docReady triggers initialization logic when the document is ready, just like jQuery's $(document).ready(). docReady is used to initialize all the demos in these docs.

docReady( function() {
  // document is ready, let's do some fun stuff!
  var container = document.querySelector('#container');
  var iso = new Isotope( container );
});

classie

classie has class helper functions. classie is not included with Isotope.

classie.has( element, 'my-class' ) // returns true/false
classie.add( element, 'my-new-class' ) // add new class
classie.remove( element, 'my-unwanted-class' ) // remove class
classie.toggle( element, 'my-class' ) // toggle class

eventie

Eventie makes event binding in IE8 legit.

var elem = document.querySelector('#my-elem');
function onElemClick( event ) {
  console.log( event.type + ' just happened on #' + event.target.id );
  // -> click just happened on #my-elem
}
// bind it
eventie.bind( elem, 'click', onElemClick );
// unbind it
eventie.unbind( elem, 'click', onElemClick );

Additional resources