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" data-isotope='{ "itemSelector": ".grid-item", "getSortData": { "name": ".name", "category": "[data-category]" }, "masonry": { "columnWidth": 200 } }'>
Recommended
itemSelector
Specifies which child elements will be used as item elements in the layout.
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>
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')
originLeft
Controls the horizontal flow of the layout. By default, item elements start positioning at the left, with originLeft: true. Set originLeft: false for right-to-left layouts.
originLeft was previously isOriginLeft in Isotope v2. isOriginLeft will still work in Isotope v3.
originLeft: false
originTop
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!
originTop was previously isOriginTop in Isotope v2. isOriginTop will still work in Isotope v3.
originTop: 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
stagger
Staggers item transitions, so items transition incrementally after one another. Set as a CSS time format, '0.03s', or as a number in milliseconds, 30.
stagger: 30
// stagger item transitions 30ms after one another
transitionDuration
Duration of the transition when items change position or appearance, set in a CSS time format, or as a number in milliseconds. Default: transitionDuration: '0.4s'
// fast transitions
transitionDuration: '0.2s'
// slow transitions
transitionDuration: '0.8s'
// no transitions
transitionDuration: 0
// 0.4s in milliseconds
transitionDuration: 400
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
}
})
Setup
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
resize
Adjusts sizes and positions when window is resized. Enabled by default resize: true.
resize was previously isResizeBound in Isotope v2. isResizeBound will still work in Isotope v3.
resize: false
/* grid has fixed width */
.grid {
width: 304px;
}
initLayout
Enables layout on initialization.
Enabled by default initLayout: true.
Set initLayout: false to disable layout on initialization, so you can use methods or add events before the initial layout.
initLayout was previously isInitLayout in Isotope v2. isInitLayout will still work in Isotope v3.
var $grid = $('.grid').isotope({
// disable initial layout
initLayout: false
});
// bind event
$grid.isotope( 'on', 'arrangeComplete', function() {
console.log('arrange is complete');
});
// manually trigger initial layout
$grid.isotope();