4.1 KiB
| title | category | layout | body_class | related | toc |
|---|---|---|---|---|---|
| Layout modes | docs | doc | option-def | layout | {title cellsByColumn} {anchor cellsbycolumn}] [{title cellsByRow} {anchor cellsbyrow}] [{title fitColumns} {anchor fitcolumns}] [{title fitRows} {anchor fitrows}] [{title masonry} {anchor masonry}] [{title masonryHorizontal} {anchor masonryhorizontal}] [{title Horizontal layouts} {anchor horizontal_layouts} |
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
{% highlight javascript %}
$('#container').isotope({ layoutMode : 'fitRows' });
{% endhighlight %}
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
{% highlight javascript %}
$('#container').isotope({ layoutMode : 'cellsByRow', cellsByRow : { columnWidth : 240, rowHeight : 360 } });
{% endhighlight %}
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
{% highlight javascript %}
$('#container').isotope({ layoutMode : 'cellsByRow', cellsByRow : { columnWidth : 240, rowHeight : 360 } });
{% endhighlight %}
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
{% highlight javascript %}
$('#container').isotope({ masonry : { columnWidth : 240 } });
{% endhighlight %}
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
{% highlight javascript %}
$('#container').isotope({ masonryHorizontal : { rowHeight : 360 } });
{% endhighlight %}
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.
{% highlight css %}
#container { /* either of these will work for horizontal Isotope layouts */ height: 80%; height: 480px; }
{% endhighlight %}