Continuing Education

No Title

Methods · jQuery Masonry

jQuery Masonry




Masonry offers several methods to extend functionality. Masonry’s methods follow the jQuery UI pattern.

$('#container').masonry( 'methodName', [optionalParameters] )


.masonry( 'appended', $content, isAnimatedFromBottom )

Triggers layout on item elements that have been appended to the container.

See Demo: Adding items.

var $boxes = $('
$('#container').append( $boxes ).masonry( 'appended', $boxes );

Setting the isAnimatedFromBottom argument to true will enable the newly appended items to be animated from the bottom, if animation is enabled.

$('#container').append( $boxes ).masonry( 'appended', $boxes, true );

The appended method is ideal to use Masonry with Infinite Scroll, in its callback.

See Demo: Infinite Scroll.

var $container = $('#container');
// infinite scroll options...
// trigger Masonry as a callback
function( newElements ) {
var $newElems = $( newElements );
$container.masonry( 'appended', $newElems );


.masonry( 'destroy' )

Removes Masonry functionality completely. Returns element back to pre-initialized state.


.masonry( 'layout', $items, callback )

Positions specified item elements in layout.

layout will only position specified elements, and those elements will be positioned at the end of layout. Whereas .masonry() will position all items in the Masonry instance.


.masonry( 'option', options )

Sets options for plugin instance. Unlike passing options through .masonry(), using the option method will not trigger layout.

// set multiple options
.masonry( 'option', { columnWidth: 120, isAnimated: false } )


.masonry( 'reloadItems' )

Re-collects all item elements in their current order in the DOM.


.masonry( 'reload' )

Convenience method for triggering reloadItems then .masonry(). Useful for prepending or inserting items.

See Demo: Adding items.

var $boxes = $('
$('#container').prepend( $boxes ).masonry( 'reload' );


.masonry( 'remove', $items )

Removes specified item elements from Masonry instance and the DOM.

jQuery Masonry by David DeSandro