Filter & sort magical layouts http://isotope.metafizzy.co
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

171 lines
4.1 KiB

---
title: Layout modes
category: docs
layout: doc
body_class: option-def
related: layout
toc:
- { 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.
[**See Demo: Layout modes**](../demos/layout-modes.html)
### 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 {#cellsByColumn-options}
<dl class="clearfix">
<dt><code>columnWidth</code></dt>
<dd class="option-type">Integer</dd>
</dl>
<dl class="clearfix">
<dt><code>rowHeight</code></dt>
<dd class="option-type">Integer</dd>
</dl>
### Example {#cellsByColumn-example}
{% highlight javascript %}
$('#container').isotope({
layoutMode : 'cellsByColumn',
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 {#cellsByRow-options}
<dl class="clearfix">
<dt><code>columnWidth</code></dt>
<dd class="option-type">Integer</dd>
</dl>
<dl class="clearfix">
<dt><code>rowHeight</code></dt>
<dd class="option-type">Integer</dd>
</dl>
### Example {#cellsByRow-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 {#masonry-options}
<dl class="clearfix">
<dt><code>columnWidth</code></dt>
<dd class="option-type">Integer</dd>
</dl>
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 {#masonry-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 {#masonryHorizontal-options}
<dl class="clearfix">
<dt><code>rowHeight</code></dt>
<dd class="option-type">Integer</dd>
</dl>
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 {#masonryHorizontal-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 %}