Methods

Methods are actions taken on Masonry instances.

var container = document.querySelector('#container');
var msnry = new Masonry( container );
container.appendChild( elem );
msnry.appended( elem );
msnry.layout();

If you are using jQuery, methods follow the jQuery UI pattern .masonry( 'methodName' /* arguments */ ).

$('#container').masonry()
  .append( elem )
  .masonry( 'appended', elem );
  // no method is same as layout -> .masonry('layout')
  .masonry();

jQuery chaining is broken by methods that return values (i.e. getItemElements, getItem, on, and off).

// chaining works with 'appended' method
$container.masonry( 'appended', elem ).fadeIn();
// 'on' method breaks jQuery chaining
$container.masonry( 'on', 'layoutComplete', function() {...} );
$container.fadeIn();

addItems

msnry.addItems( elements )
// or with jQuery
$container.masonry( 'addItems', elements )

Add item elements to the Masonry instance.

appended

msnry.appended( elements )
// or with jQuery
$container.masonry( 'appended', elements )

Add and lay out newly appended item elements. See also prepended.

var demo = document.querySelector('#appended-demo');
var container = demo.querySelector('.masonry');
var button = demo.querySelector('button');
var msnry = new Masonry( container, {
  columnWidth: 60
});

eventie.bind( button, 'click', function() {
  // create new item elements
  var elems = [];
  var fragment = document.createDocumentFragment();
  for ( var i = 0; i < 3; i++ ) {
    var elem = getItemElement();
    fragment.appendChild( elem );
    elems.push( elem );
  }
  // append elements to container
  container.appendChild( fragment );
  // add and lay out newly appended elements
  msnry.appended( elems );
});

bindResize

msnry.bindResize()
// or with jQuery
$container.masonry('bindResize')

Binds event listener to window resize, so layout is triggered when the browser window is resized.

destroy

msnry.destroy()
// or with jQuery
$container.masonry('destroy')

Removes the Masonry functionality completely. This will return the element back to its pre-initialized state.

var demo = document.querySelector('#destroy-demo');
var container = demo.querySelector('.masonry');
var button = demo.querySelector('button');
var msnry = new Masonry( container, {
  columnWidth: 60
});
var isActive = true;

eventie.bind( button, 'click', function() {
  if ( isActive ) {
    msnry.destroy();
  } else {
    msnry = new Masonry( container );
  }
  isActive = !isActive;
});

getItemElements

var elems = msnry.getItemElements()
// or with jQuery
var elems = $container.masonry('getItemElements')

Get an array of elements used as the Masonry instance's items.

getItem

var item = msnry.getItem( element )
// or with jQuery
var item = $container.masonry( 'getItem', element )

Get a Masonry.Item from an element.

hide

msnry.hide( items )
// or with jQuery
$container.masonry( 'hide', items )

Hides items.

layout

msnry.layout()
// or with jQuery
$container.masonry()

Lay out all item elements.

var container = document.querySelector('#layout-demo .masonry');
var msnry = new Masonry( container, {
  columnWidth: 60
});

eventie.bind( container, 'click', function( event ) {
  // don't proceed if item was not clicked on
  if ( !classie.has( event.target, 'item' ) ) {
    return;
  }
  // change size of item via class
  classie.toggle( event.target, 'gigante' );
  // trigger layout
  msnry.layout();
});

Click item to toggle size

Edit this example on CodePen

layoutItems

msnry.layoutItems( items, isStill )
// or with jQuery
$container.masonry( 'layoutItems', items, isStill )

Lay out specified items.

Masonry.data

var msnry = Masonry.data( element )

Get the Masonry instance from an element. Note this method is of Masonry, rather than of a Masonry instance.

This method is useful to access the Masonry instance after it was initialized via HTML.

<div id="container" class="js-masonry" data-masonry-options='{...}'>
  <div class="item"></div>
  <div class="item"></div>
  ...
</div>
var container = document.querySelector('#container');
var msnry = Masonry.data( container );
// do stuff with Masonry instance
msnry.layout();

off

msnry.off( eventName, listener )
// or with jQuery
var msnry = $container.masonry( 'off', eventName, listener )

Remove an event listener. See Events.

on

msnry.on( eventName, listener )
// or with jQuery
var msnry = $container.masonry( 'on', eventName, listener )

Add an event listener for certain events.

Unlike jQuery's on, Masonry's on only works with the specified events. msnry.on( 'click', function() {...}) will not work.

To listen for an event just once, return true in the event listener.

msnry.on( 'layoutComplete', function() {
  console.log('layout is complete, just once');
  return true;
});

prepended

msnry.prepended( elements )
// or with jQuery
$container.masonry( 'prepended', elements )

Add and lay out newly prepended item elements at the beginning of layout. Similar to appended.

var demo = document.querySelector('#prepended-demo');
var container = demo.querySelector('.masonry');
var button = demo.querySelector('button');
var msnry = new Masonry( container, {
  columnWidth: 60
});

eventie.bind( button, 'click', function() {
  // create new item elements
  var elems = [];
  var fragment = document.createDocumentFragment();
  for ( var i = 0; i < 3; i++ ) {
    var elem = document.createElement('div');
    elem.className = '.item';
    fragment.appendChild( elem );
    elems.push( elem );
  }
  // prepend elements to container
  container.insertBefore( fragment, container.firstChild );
  // add and lay out newly prepended elements
  msnry.prepended( elems );
});

Edit example on CodePen

reloadItems

msnry.reloadItems()
// or with jQuery
$container.masonry('reloadItems')

Recollect all item elements.

remove

msnry.remove( elements )
// or with jQuery
$container.masonry( 'remove', elements )

Remove elements from the Masonry instance, then from the DOM.

var container = document.querySelector('#remove-demo .masonry');
var msnry = new Masonry( container, {
  columnWidth: 60
});

eventie.bind( container, 'click', function( event ) {
  // don't proceed if item was not clicked on
  if ( !classie.has( event.target, 'item' ) ) {
    return;
  }
  // remove clicked element
  msnry.remove( event.target );
  // layout remaining item elements
  msnry.layout();
});

Click items to remove them

Edit this example on CodePen

reveal

msnry.reveal( items )
// or with jQuery
$container.masonry( 'reveal', items )

Reveals hidden items.

stamp

msnry.stamp( elements )
// or with jQuery
$container.masonry( 'stamp', elements )

Stamp the elements in the layout. Masonry will lay out item elements around stamped elements.

var demo = document.querySelector('#stamp-demo');
var stampElem = demo.querySelector('.stamp');
var button = demo.querySelector('button');
var msnry = new Masonry( demo.querySelector('.masonry'), {
  columnWidth: 60,
  itemSelector: '.item'
});
var isStamped = false;

eventie.bind( button, 'click', function() {
  // stamp or unstamp element
  if ( isStamped ) {
    msnry.unstamp( stampElem );
  } else {
    msnry.stamp( stampElem );
  }
  // trigger layout
  msnry.layout();
  isStamped = !isStamped;
});

unbindResize

msnry.unbindResize()
// or with jQuery
$container.masonry('unbindResize')

Un-bind layout to window resize event.

unstamp

msnry.unstamp( elements )
// or with jQuery
$container.masonry( 'unstamp', elements )

Un-stamp the elements, so that Masonry will no longer layout item elements around them.