Options

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

// with jQuery
$('#container').isotope({
  itemSelector: '.item',
  getSortData: {
    name: '.name',
    category: '[data-category]'
  },
  // layout mode options
  masonry: {
    columnWidth: 200
  }
});
// with vanilla JS
var iso = new Isotope( '#container', {
  itemSelector: '.item',
  getSortData: {
    name: '.name',
    category: '[data-category]'
  },
  masonry: {
    columnWidth: 200
  }
});
<!-- in HTML -->
<div id="container" class="js-isotope" data-isotope-options='{ "itemSelector": ".item", "getSortData": { "name": ".name", "category": "[data-category]" }, "masonry": { "columnWidth": 200 } }'>

containerStyle

Type: Object

Default: { position: 'relative' }

CSS styles that are applied to the container element. To disable Masonry from setting any CSS to the container element, set containerStyle: null.

filter

Type: String or Function

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

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

$container.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.

$container.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;
  }
});

getSortData

Type: Object

Isotope reads data from markup with the getSortData option. See complete docs on getSortData.

getSortData accepts an object. The object’s keys are keywords used to sortBy. Object values are either a shortcut string or function to retrieve the data.

var $container = $('#container').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, '') );
    }
  }
});

hiddenStyle

Type: Object

Default: { opacity: 0, transform: 'scale(0.001)' }

The style applied to hide items.

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

isInitLayout

Type: Boolean

Default: true

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

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

isOriginLeft

Type: Boolean

Default: true

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

isOriginLeft: false

isOriginTop

Type: Boolean

Default: true

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

isResizeBound

Type: Boolean

Default: true

Binds layout to window resizing.

isResizeBound binds layout only when the Masonry instance is first initialized. You can bind and unbind resize layout afterwards with the bindResize and unbindResize methods.

itemSelector

Type: Selector String

Specifies which child elements to be used as item elements. Setting itemSelector is always recommended. itemSelector is useful to exclude sizing elements.

itemSelector: '.item'

layoutMode

Type: String

Default: 'masonry'

Sets the layout mode used to position items. See docs on layout modes.

sortAscending

Type: Boolean or Object

Default: true

Sorts items ascending if true “A, B, C…”, “1, 2, 3…”, or descending if false, “Z, Y, X…”, “9, 8, 7…”.

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

sortAscending can also accept an object, so that you can set ascending order for each sortBy value.

  sortAscending: {
    name: true,
    weight: false,
    category: true,
    number: false
  }

sortBy

Type: String or Array

Specify which property of getSortData to sort items by. The value of sortBy needs to match a property name in getSortData.

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

Two additional sortBy options are built in.

To sort by multiple properties, you can set sortBy to an array of property names. For example, sortBy: [ 'color', 'number' ] will sort items by color, then by number.

stamp

Type: Element, NodeList, Array of Elements, or Selector String

Specifies which elements are stamped within the layout. These are special layout elements which will not be laid out. Rather, Isotope will layout item elements below stamped elements.

Only 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 id="stamp-opt-demo">
  <div class="stamp stamp1"></div>
  <div class="stamp stamp2"></div>
  <div class="item"></div>
  <div class="item"></div>
  ....
</div>
itemSelector: '.mini-item',
stamp: '.stamp'
/* position stamp elements with CSS */
#stamp-opt-demo {
  position: relative;
}
#stamp-opt-demo .stamp {
  position: absolute;
  background: orange;
  border: 4px dotted black;
}
#stamp-opt-demo .stamp1 {
  left: 30%;
  top: 10px;
  width: 20%;
  height: 100px;
}
#stamp-opt-demo .stamp2 {
  right: 10%;
  top: 20px;
  width: 70%;
  height: 30px;
}

transitionDuration

Type: String

Default: '0.4s'

Duration of the transition when items change position or appearance, set in a CSS time format.

To disable all transitions, set transitionDuration: 0.

visibleStyle

Type: Object

Default: { opacity: 1, transform: 'scale(1)' }

The style applied to reveal hidden items.

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

Element sizing

For the sizing options, like masonry: columnWidth and masonry: gutter, you may set these options to an Element or String, in addition to a Number.

<div id="container">
  <div class="grid-sizer"></div>
  <div class="item"></div>
  <div class="item"></div>
  ...
</div>

With a String, Isotope will use the string as a selector to get the first matching element within the container element. The size of that element is then used.

var $container = $('#container').isotope({
  itemSelector: '.item',
  masonry: {
    columnWidth: '.grid-sizer'
  }
});

If you are using element sizing, be sure to set itemSelector as well, so the sizing element does not get used in the layout.

With an Element, Isotope will use its outer width to set the value of the related property.

  masonry: {
    columnWidth: $container.find('.grid-sizer')[0]
  }

This allows you to control the size of the Isotope layout just with your CSS. This is useful for responsive layouts, keeping control within CSS so you can rely on media queries.

/* 5 columns by default */
.grid-sizer { width: 20%; }

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