Options

All options are optional, but itemSelector is recommended. Layout modes have their own separate options.

// with jQuery
var $grid = $('.grid').isotope({
  itemSelector: '.grid-item',
  getSortData: {
    name: '.name',
    category: '[data-category]'
  },
  // layout mode options
  masonry: {
    columnWidth: 200
  }
});

// with vanilla JS
var iso = new Isotope( '.grid', {
  itemSelector: '.grid-item',
  getSortData: {
    name: '.name',
    category: '[data-category]'
  },
  masonry: {
    columnWidth: 200
  }
});

<!-- in HTML -->
<div class="grid js-isotope" data-isotope-options='{ "itemSelector": ".grid-item", "getSortData": { "name": ".name", "category": "[data-category]" }, "masonry": { "columnWidth": 200 } }'>

Setup

itemSelector

Specifies which child elements to be used as item elements. We recommend always setting itemSelector. itemSelector is useful to exclude sizing elements or other elements that are not part of the layout.

itemSelector: '.grid-item'

<div class="grid">
  <!-- do not use banner in Isotope layout -->
  <div class="static-banner">Static banner</div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  ...
</div>

isResizeBound

Adjusts sizes and positions when window is resized. Enabled by default isResizeBound: true.

See also bindResize and unbindResize methods.

isResizeBound: false

/* grid has fixed width */
.grid {
  width: 304px;
}

containerStyle

CSS styles that are applied to the container element. Def

// default
// containerStyle: { position: 'relative' }

// disable any styles being set on container
// useful if using absolute position on container
containerStyle: null

isInitLayout

Enables layout on initialization. Enabled by default isInitLayout: true.

Set isInitLayout: false to disable layout on initialization, so you can use methods or add events before the initial layout.

var $grid = $('.grid').isotope({
  // disable initial layout
  isInitLayout: false
});
// bind event
$grid.isotope( 'on', 'arrangeComplete', function() {
  console.log('arrange is complete');
});
// manually trigger initial layout
$grid.isotope();

Edit this demo on CodePen

Layout

layoutMode

Sets the layout mode used to position items. Default is layoutMode: 'masonry' See Layout modes.

percentPosition

Sets item positions in percent values, rather than pixel values. percentPosition: true works well with percent-width items, as items will not transition their position on resize.

$('.grid').isotope({
  percentPosition: true,
  itemSelector: '.grid-item',
  masonry: {
    columnWidth: '.grid-sizer'
  }
})

/* fluid 5 columns */
.grid-sizer,
.grid-item { width: 20%; }

Element sizing

Sizing options like masonry: columnWidth, masonry: gutter, and packery: columnWidth can be set with an element. The size of the element is then used as the value of the option.

<div class="grid">
  <!-- width of .grid-sizer used for columnWidth -->
  <div class="grid-sizer"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2"></div>
  ...
</div>

/* fluid 5 columns */
.grid-sizer,
.grid-item { width: 20%; }
/* 2 columns */
.grid-item--width2 { width: 40%; }

$('.grid').isotope({
  // set itemSelector so .grid-sizer is not used in layout
  itemSelector: '.grid-item',
  percentPosition: true,
  masonry: {
    // set to the element
    columnWidth: '.grid-sizer'
  }
})

The option can be set to a Selector String or an Element.

// set to a selector string
// first matching element within container element will be used
masonry: {
  columnWidth: '.grid-sizer'
}

// set to an element
masonry: {
  columnWidth: $grid.find('.grid-sizer')[0]
}

Element sizing options allow you to control the sizing of the Isotope layout within your CSS. This is useful for responsive layouts and media queries.

/* 3 columns by default */
.grid-sizer { width: 33.333%; }

@media screen and (min-width: 768px) {
  /* 5 columns for larger screens */
  .grid-sizer { width: 20%; }
}

stamp

Specifies which elements are stamped within the layout. Isotope will layout items around stamped elements.

The masonry, packery, and masonryHorizontal layout modes support stamping.

The stamp option stamps elements only when the Isotope instance is first initialized. You can stamp additional elements afterwards with the stamp method.

<div class="grid">
  <div class="stamp stamp1"></div>
  <div class="stamp stamp2"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  ....
</div>

// specify itemSelector so stamps do get laid out
itemSelector: '.grid-item',
// stamp elements
stamp: '.stamp'

/* position stamp elements with CSS */
.grid {
  position: relative;
}
.stamp {
  position: absolute;
  background: orange;
  border: 4px dotted black;
}
.stamp1 {
  left: 30%;
  top: 10px;
  width: 20%;
  height: 100px;
}
.stamp2 {
  right: 10%;
  top: 20px;
  width: 70%;
  height: 30px;
}

stamp can be set to a Selector String, Element, or an Array-like object of Elements.

// selector string
stamp: '.stamp'

// single element
stamp: $grid.find('.stamp')[0]

// multiple elements
stamp: $grid.find('.stamp')

isOriginLeft

Controls the horizontal flow of the layout. By default, item elements start positioning at the left, with isOriginLeft: true. Set isOriginLeft: false for right-to-left layouts.

isOriginLeft: false

isOriginTop

Controls the vertical flow of the layout. By default, item elements start positioning at the top. Set to false for bottom-up layouts. It’s like Tetris!

isOriginTop: false

Filtering

filter

Shows items that match the filter and hides items that do not match. See Filtering.

If set to a string, that value is used as a selector.

$grid.isotope({ filter: '.selector' });

If filter is set to a function, that function checks each item and returns true or false if the item should be shown or hidden.

$grid.isotope({
  // filter element with numbers greater than 50
  filter: function() {
    // _this_ is the item element. Get text of element's .number
    var number = $(this).find('.number').text();
    // return true to show, false to hide
    return parseInt( number, 10 ) > 50;
  }
});

Sorting

getSortData

Isotope reads data from HTML with the getSortData option. See Sorting: getSortData.

getSortData is set with an object. The object’s keys are keywords used to sort by. Object values are either a shortcut string or function to retrieve the data.

var $grid = $('.grid').isotope({
  getSortData: {
    name: '.name', // text from querySelector
    category: '[data-category]', // value of attribute
    weight: function( itemElem ) { // function
      var weight = $( itemElem ).find('.weight').text();
      return parseFloat( weight.replace( /[\(\)]/g, '') );
    }
  }
});

sortBy

Sorts items according to which property of getSortData. See Sorting: sortBy. The value of sortBy needs to match a key name in getSortData.

$grid.isotope({
  getSortData: {
    number: '.number parseInt'
  },
  sortBy : 'number'
});

Two additional sortBy options are built in.

$grid.isotope({ sortBy : 'original-order' });
// original order of the item elements

$grid.isotope({ sortBy : 'random' });
// random order

To sort by multiple properties, you can set sortBy to an array of key names.

// sort by color, then number
sortBy: [ 'color', 'number' ]

sortAscending

Sorts items ascendingly if sortAscending: true “A, B, C…”, “1, 2, 3…”, or descendingly if sortAscending: false, “Z, Y, X…”, “9, 8, 7…”.

// sort by number, highest number first
$grid.isotope({
  sortBy: 'number',
  sortAscending: false
});

You can set ascending order for each sortBy value by setting sortAscending to an object.

sortAscending: {
  name: true, // name ascendingly
  weight: false, // weight descendingly
  category: true, // category ascendingly
  number: false // number descendingly
}

Transitions

transitionDuration

Duration of the transition when items change position or appearance, set in a CSS time format. Default: transitionDuration: '0.4s'

// fast transitions
transitionDuration: '0.2s'

// slow transitions
transitionDuration: '0.8s'

// no transitions
transitionDuration: 0

hiddenStyle & visibleStyle

The styles applied to hide and reveal items when filtering.

/* default
hiddenStyle: {
  opacity: 0,
  transform: 'scale(0.001)'
},
visibleStyle: {
  opacity: 1,
  transform: 'scale(1)'
}
*/

$grid.isotope({
  // disable scale transform transition when hiding
  hiddenStyle: {
    opacity: 0
  },
  visibleStyle: {
    opacity: 1
  }
})

Edit this demo on CodePen