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.
 
 
 

3.0 KiB

title category layout body_class
Layout Modes docs doc option-def

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 Example: Layout Modes

Example

{% highlight javascript %}

$('#container').isotope({ layoutMode: 'fitRows' });

{% endhighlight %}

Six layout modes are built into Isotope.

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

columnWidth
Integer

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

{% highlight javascript %}

$('#container').isotope({ masonry: { columnWidth: 240 } });

{% endhighlight %}

fitRows

Item elements are arranged into rows. Similar to what you would expect from a layout that uses float: left

cellsByRow

A grid layout. The grid is defined by two options, columnWidth and rowHeight.

Options

columnWidth
Integer
rowHeight
Integer

Example

{% highlight javascript %}

$('#container').isotope({ layoutMode: 'cellsByRow', cellsByRow: { columnWidth: 240, rowHeight: 360 } });

{% 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

rowHeight
Integer

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

{% highlight javascript %}

$('#container').isotope({ masonryHorizontal: { 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.

cellsByColumn

A grid layout. The grid is defined by two options, columnWidth and rowHeight. The horizontal equivalent of cellsByRow.

Options

columnWidth
Integer
rowHeight
Integer

Example

{% highlight javascript %}

$('#container').isotope({ layoutMode: 'cellsByRow', cellsByRow: { columnWidth: 240, rowHeight: 360 } });

{% endhighlight %}