@ -30,7 +30,7 @@ Determines the jQuery method to apply styles, `.css()` or `.animate()`. Useful f
+ `'css'`: Isotope uses `.css()`
+ `'jquery'`: Isotope uses `.animate()`
<h2 id="animationOptions">animationOptions</h2>
## animationOptions
<dl class="clearfix">
<dt><code>animationOptions</code></dt>
@ -40,7 +40,7 @@ Determines the jQuery method to apply styles, `.css()` or `.animate()`. Useful f
When jQuery is the animation engine, these options will be used in <code>.animate()</code>. See the [jQuery API for animate options](http://api.jquery.com/animate/#animate-properties-options) for details.
**Example:**
### Example
{% highlight javascript %}
@ -54,7 +54,7 @@ $('#container').isotope({
{% endhighlight %}
<h2 id="containerClass">containerClass</h2>
## containerClass
<dl class="clearfix">
<dt><code>containerClass</code></dt>
@ -64,7 +64,7 @@ $('#container').isotope({
The class applied to the container element.
<h2 id="filter">filter</h2>
## filter
<dl class="clearfix">
<dt><code>filter</code></dt>
@ -73,7 +73,7 @@ The class applied to the container element.
Setting a filter with show item elements that match the selector, and hide elements that do not match.
<h2 id="getSortData">getSortData</h2>
## getSortData
<dl class="clearfix">
<dt><code>getSortData</code></dt>
@ -82,7 +82,7 @@ Setting a filter with show item elements that match the selector, and hide eleme
An object containing one or several methods to retrieve data for Sorting. The methods receive one parameter (`$elem` in the example below) which is a jQuery object representing each item element. The methods need to return a value.
**Example**
### Example
{% highlight javascript %}
@ -102,7 +102,7 @@ $('#container').isotope({
{% endhighlight %}
<h2 id="hiddenClass">hiddenClass</h2>
## hiddenClass
<dl class="clearfix">
<dt><code>hiddenClass</code></dt>
@ -112,7 +112,7 @@ $('#container').isotope({
The class applied to item elements hidden by Filtering.
<h2 id="hiddenStyle">hiddenStyle</h2>
## hiddenStyle
<dl class="clearfix">
<dt><code>hiddenStyle</code></dt>
@ -122,7 +122,7 @@ The class applied to item elements hidden by Filtering.
The style applied to item elements hidden by Filtering.
<h2 id="itemSelector">itemSelector</h2>
## itemSelector
<dl class="clearfix">
<dt><code>itemSelector</code></dt>
@ -131,7 +131,7 @@ The style applied to item elements hidden by Filtering.
Restricts Isotope item elements to selector.
<h2 id="layoutMode">layoutMode</h2>
## layoutMode
<dl class="clearfix">
<dt><code>layoutMode</code></dt>
@ -139,7 +139,7 @@ Restricts Isotope item elements to selector.
In addition the general options listed above, certain layout modes each have their own options. In order to avoid conflict, these options are set with an option that matches the name of the layout mode.
Adds elements to the pool of item elements of the container, but does sort, filter or layout.
<h2 id="appended">appended</h2>
## appended
{% highlight javascript %}
@ -29,7 +29,7 @@ Adds elements via `addItems` method, then triggers `layout` just for those new e
Useful for Infinite Scroll.
<h2 id="destroy">destroy</h2>
## destroy
{% highlight javascript %}
@ -39,7 +39,7 @@ Useful for Infinite Scroll.
Removes Isotope functionality completely. Returns element back to pre-init state.
<h2 id="insert">insert</h2>
## insert
{% highlight javascript %}
@ -49,7 +49,7 @@ Removes Isotope functionality completely. Returns element back to pre-init state
Appends elements to container, adds items to via `addItems` method, and then triggers `reLayout` method so new elements are properly filtered, sorted and laid-out.
<h2 id="layout">layout</h2>
## layout
{% highlight javascript %}
@ -59,7 +59,7 @@ Appends elements to container, adds items to via `addItems` method, and then tri
Arranges new elements to the end of the layout.
<h2 id="option">option</h2>
## option
{% highlight javascript %}
@ -69,7 +69,7 @@ Arranges new elements to the end of the layout.
Modifies options for plugin instance.
<h2 id="reLayout">reLayout</h2>
## reLayout
{% highlight javascript %}
@ -80,7 +80,7 @@ Modifies options for plugin instance.
Resets layout properties and lays-out every item element.
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**
### Options
<dl class="clearfix">
<dt><code>columnWidth</code></dt>
@ -32,7 +34,7 @@ masonry is the default layout mode for Isotope. Item elements are arranged intel
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**
### Example
{% highlight javascript %}
@ -44,15 +46,15 @@ $('#container').isotope({
{% endhighlight %}
<h2 id="fitRows">fitRows</h2>
## fitRows
Item elements are arranged into rows. Similar to what you would expect from a layout that uses `float: left`
<h2 id="cellsByRow">cellsByRow</h2>
## cellsByRow
A grid layout. The grid is defined by two options, `columnWidth` and `rowHeight`.
**Options**
### Options
<dl class="clearfix">
<dt><code>columnWidth</code></dt>
@ -63,7 +65,7 @@ A grid layout. The grid is defined by two options, `columnWidth` and `rowHeight`
<dd class="option-type">Integer</dd>
</dl>
**Example**
### Example
{% highlight javascript %}
@ -77,11 +79,11 @@ $('#container').isotope({
{% endhighlight %}
<h2 id="masonryHorizontal">masonryHorizontal</h2>
## 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**
### Options
<dl class="clearfix">
<dt><code>rowHeight</code></dt>
@ -90,7 +92,7 @@ The horizontal equivalent of masonry layout. Instead of progressing top-to-botto
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**
### Example
{% highlight javascript %}
@ -102,15 +104,15 @@ $('#container').isotope({
{% endhighlight %}
<h2 id="fitRows">fitColumns</h2>
## 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.
<h2 id="cellsByRow">cellsByColumn</h2>
## cellsByColumn
A grid layout. The grid is defined by two options, `columnWidth` and `rowHeight`. The horizontal equivalent of cellsByRow.
**Options**
### Options
<dl class="clearfix">
<dt><code>columnWidth</code></dt>
@ -121,7 +123,7 @@ A grid layout. The grid is defined by two options, `columnWidth` and `rowHeight`
David DeSandro
14 years ago