Isotope v2 beta (back to V1)

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

Events

Isotope is an Event Emitter. You can bind listeners to events with the on and off methods.

var $container = $('#container').isotope({...});
var iso = new Isotope( elem );

function onLayout() {
  console.log('layout done');
}
// bind event listener
$container.isotope( 'on', 'layoutComplete', onLayout );
// un-bind event listener
$container.isotope( 'off', 'layoutComplete', onLayout );
// return true to trigger an event listener just once
$container.isotope( 'on', 'layoutComplete', function() {
  console.log('layout done, just this one time');
  return true;
});

layoutComplete

$container.masonry( 'on', 'layoutComplete', function( isoInstance, laidOutItems ) {} )
// or with vanilla JS
iso.on( 'layoutComplete', function( isoInstance, laidOutItems ) {} )
// or with jQuery

Triggered after a layout and all positioning transitions have been completed.

$container.isotope( 'on', 'layoutComplete',
  function( isoInstance, laidOutItems ) {
    console.log( 'Isotope layout completed on ' +
      laidOutItems.length + ' items' );
  }
);

Resize browser or click item to toggle size

removeComplete

iso.on( 'removeComplete', function( isoInstance, removedItems ) { //...
// or with jQuery
$container.masonry( 'on', 'removeComplete', function( isoInstance, removedItems ) {} )

Triggered after an item element has been removed.

$container.isotope( 'on', 'removeComplete',
  function( isoInstance, removedItems ) {
    notify( 'Removed ' + removedItems.length + ' items' );
  }
);

Click items to remove them