3.6 KiB
| title | category | layout | body_class | related |
|---|---|---|---|---|
| Layout Modes | docs | doc | option-def | layout |
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 %}
Six layout modes are built into Isotope.
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 %}
fitRows
Item elements are arranged into rows. Similar to what you would expect from a layout that uses float: left
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 %}
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 %}
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.
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 %}
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 %}