Isotope v2 beta (back to V1)

Changes from Isotope v1. Report any issues with Isotope v2. Thanks for being brave!

<

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

jQuery chaining is broken by methods that return values (i.e. getItemElements, getItem, on, and off).

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

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 )

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 )

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

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 )

Get an Isotope.Item from an element.

hide

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

Hides items.

insert

$container.isotope( 'insert', elements )
// or with vanilla jS
iso.insert( 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 );
  }
  // append elements to container
  $container.append( elems )
    // insert in isotope instance
    .isotope( 'insert', elems );
});

59

41

93

5

17

Edit example on CodePen

Isotope.data / .data('isotope')

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

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

Click item to toggle size

layoutItems

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

Lay out specified items.

off

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

Remove an event listener. See Events.

on

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

Add an event listener for certain events.

To listen for an event just once, return true in the event listener.

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

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

// no
$container.isotope( 'on', 'click', function() {... })
// yes
$container.isotope( 'on', 'layoutComplete', function() {...})
// yes
$container.on( 'click', function() {... })

prepended

iso.prepended( elements )
// or with vanilla JS
$container.isotope( 'prepended', 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 )

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

Click items to remove them

reveal

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

Reveals hidden items.

stamp

$container.isotope( 'stamp', elements )
// or with vanilla JS
iso.stamp( 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 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 )

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