---

title: Methods
category: docs
layout: default
toc:
  - { title: appended, anchor: appended }
  - { title: destroy, anchor: destroy }
  - { title: layout, anchor: layout }
  - { title: option, anchor: option }
  - { title: reloadItems, anchor: reloaditems }
  - { title: reload, anchor: reload }
  - { title: remove, anchor: remove }

---

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

{% highlight javascript %}

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

{% endhighlight %}


## appended

{% highlight javascript %}

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

{% endhighlight %}

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

[See Demo: Adding items](../demos/adding-items.html).

{% highlight javascript %}

var $boxes = $('<div class="box"/><div class="box"/><div class="box"/>');
$('#container').append( $boxes ).masonry( 'appended', $boxes );

{% endhighlight %}

Setting the `isAnimatedFromBottom` argument to <code><span class="kc">true</span></code> will enable the newly appended items to be animated from the bottom, if animation is enabled.

{% highlight javascript %}

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

{% endhighlight %}


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

[See Demo: Infinite Scroll](../demos/infinite-scroll.html).

{% highlight javascript %}


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

{% endhighlight %}


## destroy

{% highlight javascript %}

.masonry( 'destroy' )

{% endhighlight %}

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

## layout

{% highlight javascript %}

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

{% endhighlight %}

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.

## option

{% highlight javascript %}

.masonry( 'option', options )

{% endhighlight %}

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

{% highlight javascript %}

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

{% endhighlight %}


## reloadItems

{% highlight javascript %}

.masonry( 'reloadItems' )

{% endhighlight %}

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

## reload

{% highlight javascript %}

.masonry( 'reload' )

{% endhighlight %}

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

[See Demo: Adding items](../demos/adding-items.html).

{% highlight javascript %}

var $boxes = $('<div class="box"/><div class="box"/><div class="box"/>');
$('#container').prepend( $boxes ).masonry( 'reload' );

{% endhighlight %}

## remove

{% highlight javascript %}

.masonry( 'remove', $items )

{% endhighlight %}

Removes specified item elements from Masonry instance and the DOM.



