Methods

Masonry offers several methods to extend functionality. Methods are called on an Masonry instance

// wall is an instance of Masonry
var wall = new Masonry( element, options );
// reload is a method
wall.reload();

appended

masonryInstance.appended( [elements], isAnimatedFromBottom );

Triggers .layout() on an array of item elements that have been appended to the container. Setting the isAnimatedFromBottom argument to true will enable the newly appended items to be animated from the bottom, if CSS transitions are enabled.

See Demo: Adding items.

var container = document.getElementById('container'),
    item1 = document.createElement('div'),
    item2 = document.createElement('div');

var wall = new Masonry( container, { columnWidth: 100 });

container.appendChild( item1 );
container.appendChild( item2 );

wall.appended( [ item1, item2 ] );

build

masonryInstance.build();

Positions all items in the Masonry instance.

destroy

masonryInstance.destroy();

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

layout

masonryInstance.layout( [elements] );

Positions an array of item elements in layout.

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

reloadItems

masonryInstance.reloadItems()

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

reload

masonryInstance.reload()

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

See Demo: Adding items.

var container = document.getElementById('container'),
    item1 = document.createElement('div'),
    item2 = document.createElement('div');

var wall = new Masonry( container, { columnWidth: 100 });

container.insertBefore( item1, container.firstChild );
container.insertBefore( item2, container.firstChild );

wall.reload();