1 ---

     2 

     3 title: Methods

     4 category: docs

     5 layout: default

     6 toc:

     7   - { title: addItems, anchor: additems }

     8   - { title: appended, anchor: appended }

     9   - { title: destroy, anchor: destroy }

    10   - { title: insert, anchor: insert }

    11   - { title: layout, anchor: layout }

    12   - { title: option, anchor: option }

    13   - { title: reLayout, anchor: relayout }

    14   - { title: reloadItems, anchor: reloaditems }

    15   - { title: remove, anchor: remove }

    16   - { title: shuffle, anchor: shuffle }

    17   - { title: updateSortData, anchor: updatesortdata }

    18 

    19 ---

    20 

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

    22 

    23 {% highlight javascript %}

    24 

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

    26 

    27 {% endhighlight %}

    28 

    29 ## addItems

    30 

    31 {% highlight javascript %}

    32 

    33 .isotope( 'addItems', $items, callback )

    34 

    35 {% endhighlight %}

    36 

    37 Adds item elements to the pool of item elements of the container, but does not sort, filter or layout. See [Adding items](adding-items.html) for more details. The argument within the callback is the group of elements that were added. 

    38 

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

    40 

    41 ## appended

    42 

    43 {% highlight javascript %}

    44 

    45 .isotope( 'appended', $items, callback )

    46 

    47 {% endhighlight %}

    48 

    49 Adds item elements via `addItems` method, then triggers `layout` just for those new elements. Useful for Infinite Scroll. See [Adding items](adding-items.html) for more details.

    50 

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

    52 

    53 ## destroy

    54 

    55 {% highlight javascript %}

    56 

    57 .isotope( 'destroy' )

    58 

    59 {% endhighlight %}

    60 

    61 Removes Isotope functionality completely. Returns element back to pre-init state.

    62 

    63 ## insert

    64 

    65 {% highlight javascript %}

    66 

    67 .isotope( 'insert', $items, callback )

    68 

    69 {% endhighlight %}

    70 

    71 Appends items elements to container, adds items to via `addItems` method, and then triggers `reLayout` method so new elements are properly filtered, sorted and laid-out. See [Adding items](adding-items.html) for more details.

    72 

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

    74 

    75 ## layout

    76 

    77 {% highlight javascript %}

    78 

    79 .isotope( 'layout', $items, callback )

    80 

    81 {% endhighlight %}

    82 

    83 Positions specified item elements in layout.

    84 

    85 `layout` will only position specified elements, and those elements will be positioned at the end of layout. Whereas `reLayout` will position all elements in the Isotope widget.

    86 

    87 ## option

    88 

    89 {% highlight javascript %}

    90 

    91 .isotope( 'option', options )

    92 

    93 {% endhighlight %}

    94 

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

    96 

    97 {% highlight javascript %}

    98 

    99 // sets multiple options

   100 .isotope( 'option', { layoutMode: 'fitRows', filter: '.my-filter' } )

   101 

   102 {% endhighlight %}

   103 

   104 

   105 ## reLayout

   106 

   107 {% highlight javascript %}

   108 

   109 .isotope( 'reLayout', callback )

   110 

   111 {% endhighlight %}

   112 

   113 Resets layout properties and lays-out every item element.

   114 

   115 [**See Demo: reLayout**](../demos/relayout.html)

   116 

   117 ## reloadItems

   118 

   119 {% highlight javascript %}

   120 

   121 .isotope( 'reloadItems' )

   122 

   123 {% endhighlight %}

   124 

   125 Re-collects all item elements in their current order in the DOM.  Useful for prepending.

   126 

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

   128 

   129 ## remove

   130 

   131 {% highlight javascript %}

   132 

   133 .isotope( 'remove', $items, callback )

   134 

   135 {% endhighlight %}

   136 

   137 Removes specified item elements from Isotope widget and the DOM.

   138 

   139 [**See Demo: Removing**](../demos/removing.html).

   140 

   141 ## shuffle

   142 

   143 {% highlight javascript %}

   144 

   145 .isotope( 'shuffle', callback )

   146 

   147 {% endhighlight %}

   148 

   149 Shuffles order of items. Sets [`sortBy` option](options.html#sortby) to [`'random'`](sorting.html#sortby_option).

   150 

   151 ## updateSortData

   152 

   153 {% highlight javascript %}

   154 

   155 .isotope( 'updateSortData', $items )

   156 

   157 {% endhighlight %}

   158 

   159 Updates the sorting data on specified item elements. This method is useful if the data within an item is changed dynamically after Isotope has been initialized.