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');

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 );
});

With jQuery, appended, prepended, and insert will not work with an HTML string, like it does for jQuery's methods. Wrap your HTML string in a jQuery object so it works with Isotope.

// doesn't work
// content gets appended, but not added as Isotope item
var content = '<div class="grid-item"></div>'
$grid.append( content ).isotope( 'appended', content )

// works
// make into jQuery object
var $content = $('<div class="grid-item"></div>')
$grid.append( $content ).isotope( 'appended', $content )

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 );
});

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')