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.
 
 
 

11 KiB

title category layout body_class toc
Options docs default option-def {title animationEngine} {anchor animationengine}] [{title animationOptions} {anchor animationoptions}] [{title containerClass} {anchor containerclass}] [{title containerStyle} {anchor containerstyle}] [{title filter} {anchor filter}] [{title getSortData} {anchor getsortdata}] [{title hiddenClass} {anchor hiddenclass}] [{title hiddenStyle} {anchor hiddenstyle}] [{title itemClass} {anchor itemclass}] [{title itemPositionDataEnabled} {anchor itempositiondataenabled}] [{title itemSelector} {anchor itemselector}] [{title layoutMode} {anchor layoutmode}] [{title onLayout} {anchor onlayout}] [{title resizable} {anchor resizable}] [{title resizesContainer} {anchor resizescontainer}] [{title sortAscending} {anchor sortascending}] [{title sortBy} {anchor sortby}] [{title transformsEnabled} {anchor transformsenabled}] [{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 (see above), 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.

containerStyle

containerStyle
Object
{ position: 'relative', overflow: 'hidden' }

CSS styles applied to the container element. Relative positioning enables absolute positioning on child items. Hidden overflow ensures that filtered items that lie outside the container do not interfer with subsequent content.

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

  • '*' or '' (an empty string): 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.

itemPositionDataEnabled

itemPositionDataEnabled
Boolean
false

When enabled, the position of item elements will exposed as data, which you can retrieve with jQuery's data method with 'isotope-item-position' name space. Position is return as an object with x and y;

Example

{% highlight javascript %}

$('#container').isotope({ itemSelector: '.element', itemPositionDataEnabled: true }) // log position of each item .find('.element').each(function(){ var position = $(this).data('isotope-item-position'); console.log('item position is x: ' + position.x + ', y: ' + position.y ); });

{% endhighlight %}

itemSelector

itemSelector
Selector

Restricts Isotope item elements to selector.

layoutMode

layoutMode
String
'masonry'

See also docs on Layout modes.

See Demo: Layout modes

onLayout

onLayout
Function

Similiar to a callback, onLayout is a function that will be triggered after every time an Isotope instance runs through its layout logic.

{% highlight javascript %}

$('#container').isotope({ onLayout: function( $elems, instance ) { // this refers to jQuery object of the container element console.log( this.height() ); // callback provides jQuery object of laid-out item elements $elems.css({ background: 'blue' }); // instance is the Isotope instance console.log( instance.$filteredAtoms.length ); } });

{% endhighlight %}

resizable

resizable
Boolean
true

Triggers layout logic when browser window is resized.

resizesContainer

resizesContainer
Boolean
true

Isotope will set the height (for vertical layout modes) or width (for horizontal layout modes) of the container after layout. If resizesContainer is set to false, be sure to set a size for the container in your CSS, so it doesn't collapse when Isotope is triggered.

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.

transformsEnabled

transformsEnabled
Boolean
true

Isotope uses CSS3 transforms to position item elements, when available in the browser. Setting transformsEnabled to false will disable this feature so all browsers use top/left absolute positioning. Useful for resolving issues with CSS transforms.

Additional CSS

If you do disable transforms, but still want to use CSS transitions, you'll need add the following CSS:

{% highlight css %}

.isotope .isotope-item { -webkit-transition-property: top, left, opacity; -moz-transition-property: top, left, opacity; -ms-transition-property: top, left, opacity; -o-transition-property: top, left, opacity; transition-property: top, left, opacity; }

{% endhighlight %}

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