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
}
});
straightDown
Item elements are arranged vertically top to bottom. Useful for simple lists.
Horizontal layouts
Horizontal layout modes (masonryHorizontal, fitColumns, and cellsByColumn) 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;
}