Events

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

var msnry = new Masonry( elem );

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

layoutComplete

msnry.on( 'layoutComplete', function( msnryInstance, laidOutItems ) { //...
// or with jQuery
$container.masonry( 'on', 'layoutComplete', function( msnryInstance, laidOutItems ) {} )

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

msnry.on( 'layoutComplete', function( msnryInstance, laidOutItems ) {
  console.log('Masonry layout completed on ' + laidOutItems.length + ' items');
});

Resize browser or click item to toggle size

Edit this example on CodePen

removeComplete

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

Triggered after an item element has been removed.

msnry.on( 'removeComplete', function( msnryInstance, removedItems ) {
  console.log( 'Removed ' + removedItems.length + ' items' );
});

Click items to remove them

Edit this example on CodePen