This package has all the documentation and demos to get you started.
This package has all the documentation and demos to get you started.
View this project live at ...
View this project live at [isotope.metafizzy.co](http://isotope.metafizzy.co)
Licensing
Licensing
---------
---------
**Commercial use requires purchase of one-time license fee per developer seat.** Commercial use includes any application that makes you money. This includes portfolio sites and premium templates. Commercial licenses may be purchased at [metafizzy.co](http://metafizzy.co).
**Commercial use requires purchase of one-time license fee per developer seat.** Commercial use includes any application that makes you money. This includes portfolio sites and premium templates. Commercial licenses may be purchased at [metafizzy.co](http://metafizzy.co#licenses).
Use in non-commercial and personal applications is free.
Use in non-commercial and personal applications is free.
+ [**Filtering**](filtering.html): Hide and reveal item elements easily with jQuery selectors.
+ [**Filtering**](filtering.html): Hide and reveal item elements easily with jQuery selectors.
+ [**Sorting**](sorting.html): Re-order item elements with sorting. Sorting data can be extracted from just about anything.
+ [**Sorting**](sorting.html): Re-order item elements with sorting. Sorting data can be extracted from just about anything.
+ **Interoperability**: features can be utilized together for a cohesive experience.
+ **Interoperability**: features can be utilized together for a cohesive experience.
+ **Progressive enhancement**: Isotope's [animation engine](animating.html) takes advantage of CSS transitions and transforms when available, but will also fall back to Javascript animation for lesser browsers.
+ **Progressive enhancement**: Isotope's [animation engine](animating.html) takes advantage of the best browser features when available — CSS transitions and transforms, GPU acceleration — but will also fall back to JavaScript animation for lesser browsers.
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.
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 {#masonry-options}
### Options {#cellsByColumn-options}
<dl class="clearfix">
<dl class="clearfix">
<dt><code>columnWidth</code></dt>
<dt><code>columnWidth</code></dt>
<dd class="option-type">Integer</dd>
<dd class="option-type">Integer</dd>
</dl>
</dl>
<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 `columnWidth`, default is the width of the first item element.
### Example {#cellsByColumn-example}
### Example {#masonry-example}
{% highlight javascript %}
{% highlight javascript %}
$('#container').isotope({
$('#container').isotope({
masonry : {
layoutMode : 'cellsByRow',
columnWidth : 240
cellsByRow : {
columnWidth : 240,
rowHeight : 360
}
}
});
});
{% endhighlight %}
{% endhighlight %}
## fitRows
Item elements are arranged into rows. Similar to what you would expect from a layout that uses `float: left`
## cellsByRow
## cellsByRow
@ -88,64 +89,73 @@ $('#container').isotope({
{% endhighlight %}
{% endhighlight %}
## masonryHorizontal
## fitColumns
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.
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.
### Options {#masonryHorizontal-options}
## 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">
<dl class="clearfix">
<dt><code>rowHeight</code></dt>
<dt><code>columnWidth</code></dt>
<dd class="option-type">Integer</dd>
<dd class="option-type">Integer</dd>
</dl>
</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.
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 {#masonryHorizontal-example}
### Example {#masonry-example}
{% highlight javascript %}
{% highlight javascript %}
$('#container').isotope({
$('#container').isotope({
masonryHorizontal : {
masonry : {
rowHeight : 360
columnWidth : 240
}
}
});
});
{% endhighlight %}
{% 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 {#cellsByColumn-options}
<dl class="clearfix">
## masonryHorizontal
<dt><code>columnWidth</code></dt>
<dd class="option-type">Integer</dd>
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.
</dl>
### Options {#masonryHorizontal-options}
<dl class="clearfix">
<dl class="clearfix">
<dt><code>rowHeight</code></dt>
<dt><code>rowHeight</code></dt>
<dd class="option-type">Integer</dd>
<dd class="option-type">Integer</dd>
</dl>
</dl>
### Example {#cellsByColumn-example}
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 %}
{% highlight javascript %}
$('#container').isotope({
$('#container').isotope({
layoutMode : 'cellsByRow',
masonryHorizontal : {
cellsByRow : {
columnWidth : 240,
rowHeight : 360
rowHeight : 360
}
}
});
});
{% endhighlight %}
{% endhighlight %}
## straightDown
Item elements are arranged vertically top to bottom. Useful for simple lists.
## Horizontal layouts
## 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.
Horizontal layout modes (masonryHorizontal, fitColumns, and cellsByColumn) need a container that has a height value. Be sure that your CSS has height set.
$.error(measure+' calculated to be zero. Stopping Isotope plugin before divide by zero. Check that the width of first child inside the isotope container is not zero.')
$.error(measure+' calculated to be zero. Stopping Isotope plugin before divide by zero. Check that the width of first child inside the isotope container is not zero.');
David DeSandro
14 years ago