Isotope v2 beta (back to V1)

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

Options

• containerStyle
• filter
• getSortData
• hiddenStyle
• layoutMode
• isInitLayout
• isOriginLeft
• isOriginTop
• isResizeBound
• itemSelector
• sortAscending
• sortBy
• stamp
• transitionDuration
• visibleStyle
• Element sizing

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

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

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

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

containerStyle

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

filter

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

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

The style applied to hide items.

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

isInitLayout

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

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

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

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

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

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

sortAscending

Sorts items ascendingly if true “A, B, C…”, “1, 2, 3…”, or descendingly 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

For every property set in getSortData, Isotope can use it for sorting with the sortBy option. The value of sortBy needs to match a property name in getSortData.

container.isotope({ sortBy : 'symbol' });

Two additional sortBy options are built in.

• 'original-order' will use the original order of the item elements to arrange them in the layout.
• 'random' is a random order.

stamp

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

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

To disable all transitions, set transitionDuration: 0.

visibleStyle

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

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