Methods
Methods are actions done by Isotope instances.
With jQuery, methods follow the jQuery UI pattern .isotope( 'methodName' /*, arguments */ ).
$grid.isotope()
  .append( elem )
  .isotope( 'appended', elem )
  .isotope('layout');
jQuery chaining is broken by methods that return values like
    getItemElements.
Vanilla JavaScript methods look like isotope.methodName( /* arguments */ ). Unlike jQuery methods, they cannot be chained together.
// vanilla JS
var iso = new Isotope('.grid');
container.appendChild( elem );
iso.appended( elem );
iso.layout();
Arranging and layout
arrange / .isotope()
Filters, sorts, and lays out items. arrange is the principle method of Isotope. It is the default method with jQuery .isotope(). Pass in options to apply filtering and sorting.
// jQuery
$grid.isotope( options )
// vanilla JS
iso.arrange( options )
  options
  Object
// filter metal, sort by number, and layout
$grid.isotope({
  filter: '.metal',
  sortBy: 'number'
});
// triggering method without options will
// re-apply filtering, sorting, and layout
$grid.isotope();
// vanilla JS
iso.arrange({
  filter: '.metal',
  sortBy: 'number'
})
// re-apply filtering, sorting, and layout
iso.arrange();
layout
Lays out all item elements. layout is useful when an item has changed size, and all items need to be laid out again. layout does not apply filtering or sorting.
// jQuery
$grid.isotope('layout')
// vanilla JS
iso.layout()
var $grid = $('.grid').isotope({
  masonry: {
    columnWidth: 50
  }
});
// change size of item by toggling gigante class
$grid.on( 'click', '.grid-item', function() {
  $(this).toggleClass('gigante');
  // trigger layout after item size changes
  $grid.isotope('layout');
});
layoutItems
Lays out specified items.
// jQuery
$grid.isotope( 'layoutItems', items, isStill )
// vanilla JS
iso.layoutItems( items, isStill )
  items
  Array of Isotope.Items
  isStill
  Boolean
  Disables transitions
updateSortData
Updates sort data.
// jQuery
$grid.isotope( 'updateSortData', elements )
// vanilla JS
iso.updateSortData( elements )
  elements
  
    Element,
    jQuery Object,
    NodeList, or
    Array of Elements
  
  Optional
shuffle
Shuffles items in a random order.
// jQuery
$grid.isotope('shuffle')
// vanilla JS
iso.shuffle()
$('.shuffle-button').on( 'click', function() {
  $grid.isotope('shuffle');
});
stamp
Stamps elements in the layout. Isotope will lay out item elements around stamped elements.
// jQuery
$grid.isotope( 'stamp', elements )
// vanilla JS
iso.stamp( elements )
  elements
  
    Element,
    jQuery Object,
    NodeList, or
    Array of Elements
  
Stamping is only supported by some layout modes: masonry, packery and masonryhorizontal.
var $grid = $('.grid').isotope({
  // specify itemSelector so stamps do get laid out
  itemSelector: '.grid-item',
  masonry: {
    columnWidth: 50
  }
});
var $stampElem = $demo.find('.stamp');
var isStamped = false;
$('.stamp-button').on( 'click', function() {
  // stamp or unstamp element
  if ( isStamped ) {
    $grid.isotope( 'unstamp', $stampElem );
  } else {
    $grid.isotope( 'stamp', $stampElem );
  }
  // trigger layout
  $grid.isotope('layout');
  // set flag
  isStamped = !isStamped;
});
unstamp
// jQuery
$grid.isotope( 'unstamp', elements )
// vanilla JS
iso.unstamp( elements )
Un-stamps elements in the layout, so that Isotope will no longer layout item elements around them. See demo above.
  elements
  
    Element,
    jQuery Object,
    NodeList, or
    Array of Elements
  
hideItemElements
Hide items.
// jQuery
$grid.isotope( 'hideItemElements', elements )
// vanilla JS
iso.hideItemElements( elements )
  elements
  
    Element,
    jQuery Object,
    NodeList, or
    Array of Elements
  
revealItemElements
Reveals hidden items.
// jQuery
$grid.isotope( 'revealItemElements', elements )
// vanilla JS
iso.revealItemElements( elements )
  elements
  
    Element,
    jQuery Object,
    NodeList, or
    Array of Elements
  
Adding and removing items
appended
// jQuery
$grid.isotope( 'appended', elements )
// vanilla JS
iso.appended( elements )
Adds and lays out newly appended item elements to the end of the layout.
  elements
  
    Element,
    jQuery Object,
    NodeList, or
    Array of Elements
  
$('.append-button').on( 'click', function() {
  // create new item elements
  var $items = $('<div class="grid-item">...</div>');
  // append items to grid
  $grid.append( $items )
    // add and lay out newly appended items
    .isotope( 'appended', $items );
});
prepended
Adds and lays out newly prepended item elements at the beginning of layout.
// jQuery
iso.prepended( elements )
// vanilla JS
$grid.isotope( 'prepended', elements )
  elements
  
    Element,
    jQuery Object,
    NodeList, or
    Array of Elements
  
$('.prepend-button').on( 'click', function() {
  // create new item elements
  var $items = $('<div class="grid-item">...</div>');
  // prepend items to grid
  $grid.prepend( $items )
    // add and lay out newly prepended items
    .isotope( 'prepended', $items );
});
insert
// jQuery
$grid.isotope( 'insert', elements )
// vanilla JS
iso.insert( elements )
Appends elements into container element, adds elements as items, and arranges items with filtering and sorting.
  elements
  
    Element,
    jQuery Object,
    NodeList, or
    Array of Elements
  
var $grid = $('grid').isotope({
  masonry: {
    columnWidth: 50
  },
  // filter items with odd numbers
  filter: function() {
    var number = $( this ).find('.number').text();
    return parseInt( number, 10 ) % 2;
  },
  // sort by number
  sortBy: 'number',
  getSortData: {
    'number': '.number parseInt'
  }
});
$('.insert-button').on( 'click', function() {
  // create new item elements
  var elems = [];
  for ( var i = 0; i < 3; i++ ) {
    var $elem = $('<div class="grid-item" />');
    // set number
    var num = Math.floor( Math.random() * 100 );
    $elem.append( '<p class="number">' + num + '</p>' );
    elems.push( $elem[0] );
  }
  // insert new elements
  $grid.isotope( 'insert', elems );
});
59
41
93
5
17
addItems
// jQuery
$grid.isotope( 'addItems', elements )
// vanilla JS
iso.addItems( elements )
Adds item elements to the Isotope instance. addItems does not lay out items like appended, prepended, or insert.
  elements
  
    Element,
    jQuery Object,
    NodeList, or
    Array of Elements
  
remove
// jQuery
$grid.isotope( 'remove', elements )
// vanilla JS
iso.remove( elements )
Removes elements from the Isotope instance and DOM.
  elements
  
    Element,
    jQuery Object,
    NodeList, or
    Array of Elements
  
$grid.on( 'click', '.grid-item', function() {
  // remove clicked element
  $grid.isotope( 'remove', this )
    // layout remaining item elements
    .isotope('layout');
});
Utilities
reloadItems
Recollects all item elements.
For frameworks like Angular and React, reloadItems may be useful to apply changes to the DOM to Isotope.
// jQuery
$grid.isotope('reloadItems')
// vanilla JS
iso.reloadItems()
destroy
Removes the Isotope functionality completely. destroy will return the element back to its pre-initialized state.
// jQuery
$grid.isotope('destroy')
// vanilla JS
iso.destroy()
var isoOptions = {
  masonry: {
    columnWidth: 50
  }
};
// initialize Isotope
var $grid = $('.grid').isotope( isoOptions );
var isActive = true;
$('.toggle-button').on( 'click', function() {
  if ( isActive ) {
    $grid.isotope('destroy'); // destroy
  } else {
    $grid.isotope( isoOptions ); // re-initialize
  }
  // set flag
  isActive = !isActive;
});
getItemElements
Returns an array of all item elements in the Isotope instance.
// jQuery
var elems = $grid.isotope('getItemElements')
// vanilla JS
var elems = iso.getItemElements()
  elems
  Array of Elements
getFilteredItemElements
Returns an array of filtered item elements in current sorted order.
// jQuery
var elems = $grid.isotope('getFilteredItemElements')
// vanilla JS
var elems = iso.getFilteredItemElements()
  elems
  Array of Elements
jQuery.fn.data('isotope')
Get the Isotope instance from a jQuery object. Isotope instances are useful to access Isotope properties.
var iso = $('.grid').data('isotope')
// access Isotope properties
console.log( iso.filteredItems.length + ' filtered items'  )
Isotope.data
Get the Isotope instance via its element. Isotope.data() is useful for getting the Isotope instance in JavaScript, after it has been initalized in HTML.
var iso = Isotope.data( element )
  element
  Element or Selector String
  iso
  Isotope
<!-- init Isotope in HTML -->
<div class="grid" data-isotope='{...}'>...</div>
// jQuery
// pass in the element, $element[0], not the jQuery object
var iso = Isotope.data( $('.grid')[0] )
// vanilla JS
// using an element
var grid = document.querySelector('.grid')
var iso = Isotope.data( grid )
// using a selector string
var iso = Isotope.data('.grid')