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.
 
 
 

6.7 KiB

title category layout body_class related toc
Options docs doc option-def a-intro {title animationEngine} {anchor animationengine}] [{title animationOptions} {anchor animationoptions}] [{title containerClass} {anchor containerclass}] [{title filter} {anchor filter}] [{title getSortData} {anchor getsortdata}] [{title hiddenClass} {anchor hiddenclass}] [{title hiddenStyle} {anchor hiddenstyle}] [{title itemClass} {anchor itemclass}] [{title itemSelector} {anchor itemselector}] [{title layoutMode} {anchor layoutmode}] [{title resizable} {anchor resizable}] [{title sortAscending} {anchor sortascending}] [{title sortBy} {anchor sortby}] [{title visibleStyle} {anchor visiblestyle}] [{title Layout-specific options} {anchor layoutspecific_options}
option
Type
Default

animationEngine

animationEngine
String
'best-available'

Determines the jQuery method to apply styles, .css() or .animate(). Useful for relying on CSS transitions to handle animation.

Values

  • 'best-available': if browser supports CSS transitions, Isotope uses .css(). If not, falls back to using .animate().
  • 'css': Isotope uses .css()
  • 'jquery': Isotope uses .animate()

animationOptions

animationOptions
Object
{ queue: false, duration: 800 }

When jQuery is the animation engine, these options will be used in .animate(). See the jQuery API for animate options for details.

Example

{% highlight javascript %}

$('#container').isotope({ animationOptions: { duration: 750, easing: 'linear', queue: false } });

{% endhighlight %}

containerClass

containerClass
String
'isotope'

The class applied to the container element.

filter

filter
Selector

Setting a filter with show item elements that match the selector, and hide elements that do not match. See docs on filering for more details.

See Demo: Filtering

Values

  • '*' Shows all item elements

getSortData

getSortData
Object

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. See docs on sorting for more details.

See Demo: Sorting

Example

{% highlight javascript %}

$('#container').isotope({ getSortData : { symbol : function( $elem ) { return $elem.attr('data-symbol'); }, number : function( $elem ) { return parseInt( $elem.find('.number').text(), 10 ); }, name : function ( $elem ) { return $elem.find('.name').text(); } } });

{% endhighlight %}

hiddenClass

hiddenClass
String
'isotope-hidden'

The class applied to item elements hidden by Filtering.

hiddenStyle

hiddenStyle
Object
{ opacity : 0, scale : 0.001 }

The style applied to item elements hidden by Filtering.

itemClass

itemClass
String
'isotope-item'

The class applied to item elements.

itemSelector

itemSelector
Selector

Restricts Isotope item elements to selector.

layoutMode

layoutMode
String
'masonry'

See also docs on Layout modes.

See Demo: Layout modes

resizable

resizable
Boolean
true

Triggers layout logic when browser window is resized.

sortAscending

sortAscending
Boolean
true

Used with sorting. If true, items are sorted ascending: "1, 2, 3" or "A, B, C...". If false, items are sorted descending "Z, Y, X" or "9, 8, 7...". See docs on sorting for more details.

See Demo: Sorting

sortBy

sortBy
String

The property name of the method within the getSortData option to sort item elements. See docs on sorting for more details.

See Demo: Sorting

Values

  • 'original-order' Sorts item elements by their original order.

visibleStyle

visibleStyle
Object
{ opacity : 1, scale : 1 }

The style applied to item elements made visible by Filtering.

Layout-specific options

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.

See docs on layout modes for each layout mode's available options.

For example, if your layout switched from masonry to cellsByRow:

{% highlight javascript %}

$('#container').isotope({ masonry: { columnWidth: 120 }, cellsByRow: { columnWidth: 220, rowHeight: 220 } });

{% endhighlight %}

See Demo: Layout modes