Layout modes
Isotope has a versatile layout engine that can accommodate multiple layout modes. You can set and change the layout mode via the layoutMode option.
Example
$('#container').isotope({ layoutMode : 'fitRows' });
Several layout modes are built into Isotope.
cellsByColumn
A grid layout where items are centered inside each cell. The grid is defined by two options, columnWidth and rowHeight. The horizontal equivalent of cellsByRow.
Options
columnWidth- Integer
rowHeight- Integer
Example
$('#container').isotope({
layoutMode : 'cellsByColumn',
cellsByRow : {
columnWidth : 240,
rowHeight : 360
}
});
cellsByRow
A grid layout where items are centered inside each cell. The grid is defined by two options, columnWidth and rowHeight.
Options
columnWidth- Integer
rowHeight- Integer
Example
$('#container').isotope({
layoutMode : 'cellsByRow',
cellsByRow : {
columnWidth : 240,
rowHeight : 360
}
});
fitColumns
Item elements are arranged into columns. The horizontal equivalent of fitRows. Columns progress from left to right. Items within those columns are arranged top-to-bottom.
fitRows
Item elements are arranged into rows, left to right. Rows progress top to bottom. Similar to what you would expect from a layout that uses float: left.
masonry
masonry is the default layout mode for Isotope. Item elements are arranged intelligently within a grid. For each item element, the script calculates the next best fit for the item within the grid.
Options
columnWidth- Integer
The width of one column in the grid. If no value is set for columnWidth, default is the width of the first item element.
Example
$('#container').isotope({
masonry : {
columnWidth : 240
}
});
masonryHorizontal
The horizontal equivalent of masonry layout. Instead of progressing top-to-bottom, masonryHorizontal layout will progress left-to-right. Item elements are arranged intelligently within a grid. For each item element, the script calculates the next best fit for the item within the grid.
Options
rowHeight- Integer
The width of one column in the grid. If no value is set for rowHeight, default is the height of the first item element.
Example
$('#container').isotope({
masonryHorizontal : {
rowHeight : 360
}
});
straightAcross
Item elements are arranged horizontally left to right. Useful for simple lists.
straightDown
Item elements are arranged vertically top to bottom. Useful for simple lists.
Horizontal layouts
Horizontal layout modes (masonryHorizontal, fitColumns, cellsByColumn, and straightAcross) need a container that has a height value. Be sure that your CSS has height set.
#container {
/* either of these will work for horizontal Isotope layouts */
height: 80%;
height: 480px;
}
Modified layout modes
Isotope’s methods can be extended and overwritten to shim-in additional functionality. See these modified layout modes:
To use these mods, copy the revised methods found in the demos’ page source. They look like:
$.Isotope.prototype._masonryReset = function() {
// modified code..
};