Isotope分类过滤和排序插件在线文档 Filter & sort magical layouts

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 );
// bind event listener to be triggered just once
$container.isotope( 'once', 'layoutComplete', function() {
  console.log('layout done, just this one time');
});

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

Edit this example on CodePen

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

Edit this example on CodePen