Methods

Methods are actions taken on Isotope instances.

If you are using jQuery, methods follow the jQuery UI pattern .isotope( 'methodName' /* arguments */ ).

$container.isotope()
  .append( elem )
  .isotope( 'appended', elem )
  .isotope('layout');

// vanilla JS
var container = document.querySelector('#container');
var iso = new Isotope( container );
container.appendChild( elem );
iso.appended( elem );
iso.layout();

// chaining works with 'appended' method
$container.isotope( 'appended', elem ).fadeIn();
// 'on' method breaks jQuery chaining
$container.isotope( 'on', 'layoutComplete', function() {...} );
$container.fadeIn();

addItems

$container.isotope( 'addItems', elements )
// or with vanilla JS
iso.addItems( elements )

• elements

  Type: Element, jQuery Object, NodeList, or Array of Elements

Add item elements to the Isotope instance. addItems does not lay out items like appended, insert, prepended.

appended

$container.isotope( 'appended', elements )
// or with vanilla JS
iso.appended( elements )

• elements

  Type: Element, jQuery Object, NodeList, or Array of Elements

Add and lay out newly appended item elements to the end of the layout. See also insert and prepended.

var $demo = $('#appended-demo');
var $container = $demo.find('.isotope').isotope({
  masonry: {
    columnWidth: 50
  }
});

$demo.find('button').on( 'click', function() {
  // create new item elements
  var elems = [];
  for ( var i = 0; i < 3; i++ ) {
    var elem = getItemElement();
    elems.push( elem );
  }
  // append elements to container
  $container.append( elems )
    // add and lay out newly appended elements
    .isotope( 'appended', elems );
});

arrange / .isotope()

$container.isotope( options )
// or with vanilla JS
iso.arrange( options )

• options

  Type: Object

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.

// filter metal, sort by number, and layout
$container.isotope({
  filter: '.metal',
  sortBy: 'number'
});
// triggering method without options will
// re-apply filtering, sorting, and layout
$container.isotope();

// with vanilla JS
iso.arrange({
  filter: '.metal',
  sortBy: 'number'
})
// re-apply filtering, sorting, and layout
iso.arrange();

bindResize

$container.isotope('bindResize')
// or with vanilla JS
iso.bindResize()

Binds event listener to window resize, so layout is triggered when the browser window is resized.

destroy

$container.isotope('destroy')
// or with vanilla JS
iso.destroy()

Removes the Isotope functionality completely. This will return the element back to its pre-initialized state.

var $demo = $('#destroy-demo');
var isoOptions = {
  masonry: {
    columnWidth: 50
  }
};
// initialize Isotope
var $container = $demo.find('.isotope').isotope( isoOptions );
var isActive = true;

$demo.find('button').on( 'click', function() {
  if ( isActive ) {
    $container.isotope('destroy'); // destroy
  } else {
    $container.isotope( isoOptions ); // re-initialize
  }
  isActive = !isActive;
});

getItemElements

var elems = $container.isotope('getItemElements')
// or with vanilla JS
var elems = iso.getItemElements()

• returns

  itemElems

  Type: Array

Get an array of elements used as the Isotope instance's items.

getItem

var item = $container.isotope( 'getItem', element )
// or with vanilla JS
var item = iso.getItem( element )

• element

  Type: Element

• returns

  item

  Type: Isotope.Item

Get an Isotope.Item from an element.

hide

$container.isotope( 'hide', items )
// or with vanilla JS
iso.hide( items )

• items

  Type: Array of Isotope.Items

Hides items.

insert

$container.isotope( 'insert', elements )
// or with vanilla jS
iso.insert( elements )

• elements

  Type: Element, jQuery Object, NodeList, or Array of Elements

Inserts elements into container elements and adds elements as items. Filtering and sorting will be applied to inserted elements.

var $demo = $('#insert-demo');
var $container = $demo.find('.isotope').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'
  }
});

$demo.find('button').on( 'click', function() {
  // create new item elements
  var elems = [];
  for ( var i = 0; i < 3; i++ ) {
    var elem = getItemElement();
    // set number
    var number = Math.floor( Math.random() * 100 );
    $( elem ).append( '<p class="number">' + number + '</p>' );
    elems.push( elem );
  }
  // insert new elements
  $container.isotope( 'insert', elems );
});

Isotope.data / .data('isotope')

var iso = $( element ).data('isotope')
// or with vanilla jS
var iso = Isotope.data( element )

• elements

  Type: Element

• returns

  iso

  Type: Isotope

Get the Isotope instance from an element. Note this method is of Isotope, rather than of a Isotope instance.

This method is useful to access the Isotope instance after it was initialized via HTML.

<div id="container" class="js-isotope" data-isotope-options='{...}'>
  <div class="item"></div>
  <div class="item"></div>
  ...
</div>

var iso = $('#container').data('isotope');
// do stuff with Isotope instance
iso.layout();

layout

$container.isotope('layout')
// or with vanilla JS
iso.layout()

Lay 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.

var $container = $('#layout-demo .isotope').isotope({
  masonry: {
    columnWidth: 50
  }
});
// change size of item by toggling gigante class
$container.on( 'click', '.mini-item', function() {
  $(this).toggleClass('gigante');
  $container.isotope('layout');
});

layoutItems

iso.layoutItems( items, isStill )
// or with vanilla JS
$container.isotope( 'layoutItems', items, isStill )

• items

  Type: Array of Isotope.Items

• isStill

  Type: Boolean

  Disables transitions

Lay out specified items.

off

var iso = $container.isotope( 'off', eventName, listener )
// or with vanilla JS
iso.off( eventName, listener )

• eventName

  Type: String

  name of a Isotope event

• listener

  Type: Function

• returns

  iso

  Type: Isotope

Remove an event listener. See Events.

on

var iso = $container.isotope( 'on', eventName, listener )
// or with vanilla JS
iso.on( eventName, listener )

• eventName

  Type: String

  name of a Isotope event

• listener

  Type: Function

• returns

  iso

  Type: Isotope

Add an event listener for certain events.

Isotope's on method only works with the specified events.

// yes, layoutComplete is an Isotope event
$container.isotope( 'on', 'layoutComplete', function() {...})
// no, click is not an Isotope event
$container.isotope( 'on', 'click', function() {... })
// yes, click is a jQuery event
$container.on( 'click', function() {... })

once

var iso = $container.isotope( 'once', eventName, listener )
// or with vanilla JS
iso.once( eventName, listener )

Add an event listener for certain events, to be triggered once.

$container.isotope( 'once', 'layoutComplete', function() {
  console.log('layout is complete, just once')
})

prepended

iso.prepended( elements )
// or with vanilla JS
$container.isotope( 'prepended', elements )

• elements

  Type: Element, jQuery Object, NodeList, or Array of Elements

Add and lay out newly prepended item elements at the beginning of layout. Similar to appended.

var $demo = $('#prepended-demo');
var $container = $demo.find('.isotope').isotope({
  masonry: {
    columnWidth: 50
  }
});

$demo.find('button').on( 'click', function() {
  // create new item elements
  var elems = [];
  for ( var i = 0; i < 3; i++ ) {
    var elem = getItemElement();
    elems.push( elem );
  }
  // prepend elements to container
  $container.prepend( elems )
    // add and lay out newly prepended elements
    .isotope( 'prepended', elems );
});

reloadItems

$container.isotope('reloadItems')
// or with vanilla JS
iso.reloadItems()

Recollect all item elements.

remove

$container.isotope( 'remove', elements )
// or with vanilla JS
iso.remove( elements )

• elements

  Type: Element, jQuery Object, NodeList, or Array of Elements

Remove elements from the Isotope instance, then from the DOM.

var $container = $('#remove-demo .isotope').isotope({
  masonry: {
    columnWidth: 50
  }
});

$container.on( 'click', '.mini-item', function() {
  // remove clicked element
  $container.isotope( 'remove', this )
    // layout remaining item elements
    .isotope('layout');
});

reveal

$container.isotope( 'reveal', items )
// or with vanilla JS
iso.reveal( items )

• items

  Type: Array of Isotope.Items

Reveals hidden items.

shuffle

$container.isotope('shuffle')
// or with vanilla JS
iso.shuffle()

Shuffles item in a random order.

$('#shuffle-button').on( 'click', function() {
  $container.isotope('shuffle');
});

stamp

$container.isotope( 'stamp', elements )
// or with vanilla JS
iso.stamp( elements )

• elements

  Type: Element, jQuery Object, NodeList, or Array of Elements

Stamp the elements in the layout. Isotope will lay out item elements around stamped elements.

Stamping is only supported by some layout modes: masonry, packery and masonryhorizontal.

Set itemSelector so that stamps do not get used as layout items.

var $demo = $('#stamp-demo');
var $container = $demo.find('.isotope').isotope({
  itemSelector: '.mini-item',
  masonry: {
    columnWidth: 50
  }
});
var $stampElem = $demo.find('.stamp');
var isStamped = false;

$demo.find('button').on( 'click', function() {
  // stamp or unstamp element
  if ( isStamped ) {
    $container.isotope( 'unstamp', $stampElem );
  } else {
    $container.isotope( 'stamp', $stampElem );
  }
  // trigger layout
  $container.isotope('layout');
  isStamped = !isStamped;
});

unbindResize

$container.isotope('unbindResize')
// or with vanilla JS
iso.unbindResize()

Un-bind layout to window resize event.

unstamp

$container.isotope( 'unstamp', elements )
// or with vanilla JS
iso.unstamp( elements )

• elements

  Type: Element, jQuery Object, NodeList, or Array of Elements

Un-stamp the elements, so that Isotope will no longer layout item elements around them.

updateSortData

$container.isotope( 'updateSortData', elements )
// or with vanilla JS
iso.updateSortData( elements )

• elements

  Type: Element, jQuery Object, NodeList, or Array of Elements

  Optional