File: D:/web/expressmusic/isotope-docs/isotope-docs/options.html
<!doctype html>
<html class="export">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<meta name="description" content="filter & sort magical layouts">
<title>Isotope · Options</title>
<!-- Isotope does not require any CSS files -->
<link rel="stylesheet" href="css/isotope-docs.css" media="screen">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@metafizzyco">
<meta name="twitter:url" content="http://isotope.metafizzy.co/options.html">
<meta name="twitter:title" content="Isotope Options">
<meta name="twitter:description" content="filter & sort magical layouts">
</head>
<body class="page--options" data-page="options">
<div class="nav">
<h1 class="nav__title"><a href=".">Isotope</a></h1>
<ol class="site-nav">
<li class="site-nav__item site-nav__item--filtering">
<a class="site-nav__item__link" href="filtering.html">Filtering</a></li>
<li class="site-nav__item site-nav__item--sorting">
<a class="site-nav__item__link" href="sorting.html">Sorting</a></li>
<li class="site-nav__item site-nav__item--layout ">
<a class="site-nav__item__link" href="layout.html">Layout</a>
</li>
<li class="site-nav__item site-nav__item--layout-modes sub-nav-parent">
<a class="site-nav__item__link" href="layout-modes.html">Layout modes</a>
<ul class="sub-nav">
<li class="sub-nav__item sub-nav__item--masonry">
<a class="sub-nav__item__link" href="layout-modes/masonry.html">masonry</a></li>
<li class="sub-nav__item sub-nav__item--fitrows">
<a class="sub-nav__item__link" href="layout-modes/fitrows.html">fitRows</a></li>
<li class="sub-nav__item sub-nav__item--vertical">
<a class="sub-nav__item__link" href="layout-modes/vertical.html">vertical</a></li>
<li class="sub-nav__item sub-nav__item--packery">
<a class="sub-nav__item__link" href="layout-modes/packery.html">packery</a></li>
<li class="sub-nav__item sub-nav__item--cellsbyrow">
<a class="sub-nav__item__link" href="layout-modes/cellsbyrow.html">cellsByRow</a></li>
<li class="sub-nav__item sub-nav__item--masonryhorizontal">
<a class="sub-nav__item__link" href="layout-modes/masonryhorizontal.html">masonryHorizontal</a></li>
<li class="sub-nav__item sub-nav__item--fitcolumns">
<a class="sub-nav__item__link" href="layout-modes/fitcolumns.html">fitColumns</a></li>
<li class="sub-nav__item sub-nav__item--cellsbycolumn">
<a class="sub-nav__item__link" href="layout-modes/cellsbycolumn.html">cellsByColumn</a></li>
<li class="sub-nav__item sub-nav__item--horizontal">
<a class="sub-nav__item__link" href="layout-modes/horizontal.html">horizontal</a></li>
</ul>
</li>
<li class="site-nav__item site-nav__item--options">
<a class="site-nav__item__link" href="options.html">Options</a></li>
<li class="site-nav__item site-nav__item--methods">
<a class="site-nav__item__link" href="methods.html">Methods</a></li>
<li class="site-nav__item site-nav__item--events">
<a class="site-nav__item__link" href="events.html">Events</a></li>
<li class="site-nav__item site-nav__item--license">
<a class="site-nav__item__link" href="license.html">License</a></li>
<li class="site-nav__item site-nav__item--appendix">
<a class="site-nav__item__link" href="appendix.html">Appendix</a></li>
<li class="site-nav__item site-nav__item--faq">
<a class="site-nav__item__link" href="faq.html">FAQ</a></li>
</ol>
<ul class="page-nav" data-js-module="page-nav">
<li class="page-nav__item page-nav__item--h2"><a href="#setup">Setup</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#itemselector">itemSelector</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#isresizebound">isResizeBound</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#containerstyle">containerStyle</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#isinitlayout">isInitLayout</a></li>
<li class="page-nav__item page-nav__item--h2"><a href="#layout">Layout</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#layoutmode">layoutMode</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#percentposition">percentPosition</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#element-sizing">Element sizing</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#stamp">stamp</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#isoriginleft">isOriginLeft</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#isorigintop">isOriginTop</a></li>
<li class="page-nav__item page-nav__item--h2"><a href="#filtering">Filtering</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#filter">filter</a></li>
<li class="page-nav__item page-nav__item--h2"><a href="#sorting">Sorting</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#getsortdata">getSortData</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#sortby">sortBy</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#sortascending">sortAscending</a></li>
<li class="page-nav__item page-nav__item--h2"><a href="#transitions">Transitions</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#transitionduration">transitionDuration</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#hiddenstyle-visiblestyle">hiddenStyle & visibleStyle</a></li>
</ul>
</div>
<div id="content" class="main">
<div class="primary-content">
<h1>Options</h1>
<p>All options are optional, but <a href="#itemselector"><code>itemSelector</code></a> is recommended. <a href="layout-modes.html#layout-mode-options">Layout modes have their own separate options</a>.</p>
<pre><code class="js"><span class="comment">// with jQuery</span>
<span class="keyword">var</span> <span class="jquery_var">$grid</span> = $(<span class="string">'.grid'</span>).isotope({
itemSelector: <span class="string">'.grid-item'</span>,
getSortData: {
name: <span class="string">'.name'</span>,
category: <span class="string">'[data-category]'</span>
},
<span class="comment">// layout mode options</span>
masonry: {
columnWidth: <span class="number">200</span>
}
});
</code></pre>
<pre><code class="js"><span class="comment">// with vanilla JS</span>
<span class="keyword">var</span> <span class="isotope_var">iso</span> = <span class="keyword">new</span> <span class="isotope_keyword">Isotope</span>( <span class="string">'.grid'</span>, {
itemSelector: <span class="string">'.grid-item'</span>,
getSortData: {
name: <span class="string">'.name'</span>,
category: <span class="string">'[data-category]'</span>
},
masonry: {
columnWidth: <span class="number">200</span>
}
});
</code></pre>
<pre><code class="html"><span class="comment"><!-- in HTML --></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"grid js-isotope"</span> <span class="attribute">data-isotope-options</span>=<span class="value">'{ "itemSelector": ".grid-item", "getSortData": { "name": ".name", "category": "[data-category]" }, "masonry": { "columnWidth": 200 } }'</span>></span>
</code></pre>
<h2 id="setup">Setup</h2>
<h3 id="itemselector">itemSelector</h3>
<p>Specifies which child elements to be used as item elements. We recommend always setting <code>itemSelector</code>. <code>itemSelector</code> is useful to exclude <a href="#element-sizing">sizing elements</a> or other elements that are not part of the layout.</p>
<div class="duo example">
<div class="duo__cell example__code">
<pre><code class="js">itemSelector: <span class="string">'.grid-item'</span>
</code></pre>
<pre><code class="html"><span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"grid"</span>></span>
<span class="comment"><!-- do not use banner in Isotope layout --></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"static-banner"</span>></span>Static banner<span class="tag"></<span class="title">div</span>></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"grid-item"</span>></span><span class="tag"></<span class="title">div</span>></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"grid-item"</span>></span><span class="tag"></<span class="title">div</span>></span>
...
<span class="tag"></<span class="title">div</span>></span>
</code></pre>
</div>
<div class="duo__cell example__demo">
<div class="grid grid--has-banner js-isotope" data-isotope-options="{ "itemSelector": ".grid-item", "masonry": { "columnWidth": 50 }}">
<div class="static-banner">Static banner</div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item grid-item--width2 grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
<p class="edit-demo">
<a href="http://codepen.io/desandro/pen/yNOdxr">Edit this demo on CodePen</a>
</p>
</div>
</div>
<h3 id="isresizebound">isResizeBound</h3>
<p>Adjusts sizes and positions when window is resized. Enabled by default <code><span class="comment">isResizeBound: true</span></code>.</p>
<p>See also <a href="methods.html#bindresize"><code>bindResize</code></a> and <a href="methods.html#unbindresize"><code>unbindResize</code></a> methods.</p>
<div class="duo example">
<div class="duo__cell example__code">
<pre><code class="js">isResizeBound: <span class="literal">false</span>
</code></pre>
<pre><code class="css"><span class="comment">/* grid has fixed width */</span>
<span class="class">.grid</span> <span class="rules">{
<span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">304px</span></span></span>;
}</span>
</code></pre>
</div>
<div class="duo__cell example__demo">
<div class="grid grid--fixed-width js-isotope" data-isotope-options="{ "masonry": { "columnWidth": 50 }}">
<div class="grid-item"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item grid-item--width2 grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
<p class="edit-demo">
<a href="http://codepen.io/desandro/pen/LVNKab">Edit this demo on CodePen</a>
</p>
</div>
</div>
<h3 id="containerstyle">containerStyle</h3>
<p>CSS styles that are applied to the container element. Def</p>
<pre><code class="js"><span class="comment">// default</span>
<span class="comment">// containerStyle: { position: 'relative' }</span>
<span class="comment">// disable any styles being set on container</span>
<span class="comment">// useful if using absolute position on container</span>
containerStyle: <span class="literal">null</span>
</code></pre>
<h3 id="isinitlayout">isInitLayout</h3>
<p>Enables layout on initialization.
Enabled by default <code><span class="comment">isInitLayout: true</span></code>.</p>
<p>Set <code>isInitLayout: <span class="literal">false</span></code> to disable layout on initialization, so you can use <a href="methods.html">methods</a> or add <a href="events.html">events</a> before the initial layout.</p>
<pre><code class="js"><span class="keyword">var</span> <span class="jquery_var">$grid</span> = $(<span class="string">'.grid'</span>).isotope({
<span class="comment">// disable initial layout</span>
isInitLayout: <span class="literal">false</span>
});
<span class="comment">// bind event</span>
<span class="jquery_var">$grid</span>.isotope( <span class="string">'on'</span>, <span class="string">'arrangeComplete'</span>, <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>{
<span class="built_in">console</span>.log(<span class="string">'arrange is complete'</span>);
});
<span class="comment">// manually trigger initial layout</span>
<span class="jquery_var">$grid</span>.isotope();
</code></pre>
<p class="edit-demo">
<a href="http://codepen.io/desandro/pen/doXbZL">Edit this demo on CodePen</a>
</p>
<h2 id="layout">Layout</h2>
<h3 id="layoutmode">layoutMode</h3>
<p>Sets the layout mode used to position items. Default is
<code><span class="comment">layoutMode: 'masonry'</span></code>
See <a href="layout-modes.html">Layout modes</a>.</p>
<h3 id="percentposition">percentPosition</h3>
<p>Sets item positions in percent values, rather than pixel values. <code>percentPosition: <span class="literal">true</span></code> works well with percent-width items, as items will not transition their position on resize.</p>
<div class="duo example">
<div class="duo__cell example__code">
<pre><code class="js">$(<span class="string">'.grid'</span>).isotope({
percentPosition: <span class="literal">true</span>,
itemSelector: <span class="string">'.grid-item'</span>,
masonry: {
columnWidth: <span class="string">'.grid-sizer'</span>
}
})
</code></pre>
<pre><code class="css"><span class="comment">/* fluid 5 columns */</span>
<span class="class">.grid-sizer</span>,
<span class="class">.grid-item</span> <span class="rules">{ <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">20%</span></span></span>; }</span>
</code></pre>
</div>
<div class="duo__cell example__demo">
<div class="grid grid--fluid-5-col js-isotope" data-isotope-options="{ "masonry": { "columnWidth": ".grid-sizer" }, "itemSelector": ".grid-item", "percentPosition": true }">
<div class="grid-sizer"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item grid-item--width2 grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item"></div>
</div>
<p class="edit-demo">
<a href="http://codepen.io/desandro/pen/mIkhq">Edit this demo on CodePen</a>
</p>
</div>
</div>
<h3 id="element-sizing">Element sizing</h3>
<p>Sizing options like <a href="layout-modes/masonry.html#columnwidth"><code>masonry: columnWidth</code></a>, <a href="layout-modes/masonry.html#gutter"><code>masonry: gutter</code></a>, and <a href="layout-modes/packery.html#columnwidth"><code>packery: columnWidth</code></a> can be set with an element. The size of the element is then used as the value of the option.</p>
<div class="duo example">
<div class="duo__cell example__code">
<pre><code class="html"><span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"grid"</span>></span>
<span class="comment"><!-- width of .grid-sizer used for columnWidth --></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"grid-sizer"</span>></span><span class="tag"></<span class="title">div</span>></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"grid-item"</span>></span><span class="tag"></<span class="title">div</span>></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"grid-item grid-item--width2"</span>></span><span class="tag"></<span class="title">div</span>></span>
...
<span class="tag"></<span class="title">div</span>></span>
</code></pre>
<pre><code class="css"><span class="comment">/* fluid 5 columns */</span>
<span class="class">.grid-sizer</span>,
<span class="class">.grid-item</span> <span class="rules">{ <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">20%</span></span></span>; }</span>
<span class="comment">/* 2 columns */</span>
<span class="class">.grid-item--width2</span> <span class="rules">{ <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">40%</span></span></span>; }</span>
</code></pre>
<pre><code class="js">$(<span class="string">'.grid'</span>).isotope({
<span class="comment">// set itemSelector so .grid-sizer is not used in layout</span>
itemSelector: <span class="string">'.grid-item'</span>,
percentPosition: <span class="literal">true</span>,
masonry: {
<span class="comment">// set to the element</span>
columnWidth: <span class="string">'.grid-sizer'</span>
}
})
</code></pre>
</div>
<div class="duo__cell examle__demo">
<div class="grid grid--fluid-5-col js-isotope" data-isotope-options="{ "masonry": { "columnWidth": ".grid-sizer" }, "itemSelector": ".grid-item", "percentPosition": true }">
<div class="grid-sizer"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item grid-item--width2 grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item"></div>
</div>
<p class="edit-demo">
<a href="http://codepen.io/desandro/pen/mIkhq">Edit this demo on CodePen</a>
</p>
</div>
</div>
<p>The option can be set to a Selector <i>String</i> or an <i>Element</i>.</p>
<pre><code class="js"><span class="comment">// set to a selector string</span>
<span class="comment">// first matching element within container element will be used</span>
masonry: {
columnWidth: <span class="string">'.grid-sizer'</span>
}
<span class="comment">// set to an element</span>
masonry: {
columnWidth: <span class="jquery_var">$grid</span>.find(<span class="string">'.grid-sizer'</span>)[<span class="number">0</span>]
}
</code></pre>
<p>Element sizing options allow you to control the sizing of the Isotope layout within your CSS. This is useful for responsive layouts and media queries.</p>
<pre><code class="css"><span class="comment">/* 3 columns by default */</span>
<span class="class">.grid-sizer</span> <span class="rules">{ <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">33.333%</span></span></span>; }</span>
<span class="at_rule">@<span class="keyword">media</span> screen and (min-width: <span class="number">768px</span>) </span>{
<span class="comment">/* 5 columns for larger screens */</span>
<span class="class">.grid-sizer</span> <span class="rules">{ <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">20%</span></span></span>; }</span>
}
</code></pre>
<h3 id="stamp">stamp</h3>
<p>Specifies which elements are <em>stamped</em> within the layout. Isotope will layout items around stamped elements.</p>
<p>The <a href="layout-modes/masonry.html">masonry</a>, <a href="layout-modes/packery.html">packery</a>, and <a href="layout-modes/masonryhorizontal.html">masonryHorizontal</a> layout modes support stamping.</p>
<p>The <code>stamp</code> option stamps elements only when the Isotope instance is first initialized. You can stamp additional elements afterwards with the <a href="methods.html#stamp"><code>stamp</code> method</a>.</p>
<div class="duo example">
<div class="duo__cell example__code">
<pre><code class="html"><span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"grid"</span>></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"stamp stamp1"</span>></span><span class="tag"></<span class="title">div</span>></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"stamp stamp2"</span>></span><span class="tag"></<span class="title">div</span>></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"grid-item"</span>></span><span class="tag"></<span class="title">div</span>></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"grid-item"</span>></span><span class="tag"></<span class="title">div</span>></span>
....
<span class="tag"></<span class="title">div</span>></span>
</code></pre>
<pre><code class="js"><span class="comment">// specify itemSelector so stamps do get laid out</span>
itemSelector: <span class="string">'.grid-item'</span>,
<span class="comment">// stamp elements</span>
stamp: <span class="string">'.stamp'</span>
</code></pre>
<pre><code class="css"><span class="comment">/* position stamp elements with CSS */</span>
<span class="class">.grid</span> <span class="rules">{
<span class="rule"><span class="attribute">position</span>:<span class="value"> relative</span></span>;
}</span>
<span class="class">.stamp</span> <span class="rules">{
<span class="rule"><span class="attribute">position</span>:<span class="value"> absolute</span></span>;
<span class="rule"><span class="attribute">background</span>:<span class="value"> orange</span></span>;
<span class="rule"><span class="attribute">border</span>:<span class="value"> <span class="number">4px</span> dotted black</span></span>;
}</span>
<span class="class">.stamp1</span> <span class="rules">{
<span class="rule"><span class="attribute">left</span>:<span class="value"> <span class="number">30%</span></span></span>;
<span class="rule"><span class="attribute">top</span>:<span class="value"> <span class="number">10px</span></span></span>;
<span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">20%</span></span></span>;
<span class="rule"><span class="attribute">height</span>:<span class="value"> <span class="number">100px</span></span></span>;
}</span>
<span class="class">.stamp2</span> <span class="rules">{
<span class="rule"><span class="attribute">right</span>:<span class="value"> <span class="number">10%</span></span></span>;
<span class="rule"><span class="attribute">top</span>:<span class="value"> <span class="number">20px</span></span></span>;
<span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">70%</span></span></span>;
<span class="rule"><span class="attribute">height</span>:<span class="value"> <span class="number">30px</span></span></span>;
}</span>
</code></pre>
</div>
<div class="duo__cell example__demo">
<div class="grid grid--has-stamp js-isotope" data-isotope-options="{ "itemSelector": ".grid-item", "stamp": ".stamp", "masonry": { "columnWidth": 50 } }">
<div class="stamp stamp--stamp-option-demo-stamp1"></div>
<div class="stamp stamp--stamp-option-demo-stamp2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item grid-item--width2 grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
<p class="edit-demo">
<a href="http://codepen.io/desandro/pen/jfhnx">Edit this demo on CodePen</a>
</p>
</div>
</div>
<p><code>stamp</code> can be set to a Selector <i>String</i>, <i>Element</i>, or an <i>Array</i>-like object of <i>Element</i>s.</p>
<pre><code class="js"><span class="comment">// selector string</span>
stamp: <span class="string">'.stamp'</span>
<span class="comment">// single element</span>
stamp: <span class="jquery_var">$grid</span>.find(<span class="string">'.stamp'</span>)[<span class="number">0</span>]
<span class="comment">// multiple elements</span>
stamp: <span class="jquery_var">$grid</span>.find(<span class="string">'.stamp'</span>)
</code></pre>
<h3 id="isoriginleft">isOriginLeft</h3>
<p>Controls the horizontal flow of the layout. By default, item elements start positioning at the left, with <code><span class="comment">isOriginLeft: true</span></code>. Set <code>isOriginLeft: <span class="literal">false</span></code> for right-to-left layouts.</p>
<div class="duo example">
<div class="duo__cell example__code">
<pre><code class="js">isOriginLeft: <span class="literal">false</span>
</code></pre>
</div>
<div class="duo__cell example__code">
<div class="grid grid--counting js-isotope" data-isotope-options="{ "isOriginLeft": false, "masonry": { "columnWidth": 50 } }">
<div class="grid-item"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item grid-item--width2 grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
<p class="edit-demo">
<a href="http://codepen.io/desandro/pen/gadFJ">Edit this demo on CodePen</a>
</p>
</div>
</div>
<h3 id="isorigintop">isOriginTop</h3>
<p>Controls the vertical flow of the layout. By default, item elements start positioning at the top. Set to <code><span class="literal">false</span></code> for bottom-up layouts. It’s like Tetris!</p>
<div class="duo example">
<div class="duo__cell example__code">
<pre><code class="js">isOriginTop: <span class="literal">false</span>
</code></pre>
</div>
<div class="duo__cell example__demo">
<div class="grid grid--counting js-isotope" data-isotope-options="{ "isOriginTop": false }">
<div class="grid-item"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item grid-item--width2 grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
<p class="edit-demo">
<a href="http://codepen.io/desandro/pen/kxFJH">Edit this demo on CodePen</a>
</p>
</div>
</div>
<h2 id="filtering">Filtering</h2>
<h3 id="filter">filter</h3>
<p>Shows items that match the filter and hides items that do not match. See <a href="filtering.html">Filtering</a>.</p>
<p>If set to a string, that value is used as a <a href="filtering.html#selectors">selector</a>.</p>
<pre><code class="js"><span class="jquery_var">$grid</span>.isotope({ filter: <span class="string">'.selector'</span> });
</code></pre>
<p>If <a href="filtering.html#functions"><code>filter</code> is set to a function</a>, that function checks each item and returns <code>true</code> or <code>false</code> if the item should be shown or hidden.</p>
<pre><code class="js"><span class="jquery_var">$grid</span>.isotope({
<span class="comment">// filter element with numbers greater than 50</span>
filter: <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>{
<span class="comment">// _this_ is the item element. Get text of element's .number</span>
<span class="keyword">var</span> number = $(<span class="keyword">this</span>).find(<span class="string">'.number'</span>).text();
<span class="comment">// return true to show, false to hide</span>
<span class="keyword">return</span> <span class="built_in">parseInt</span>( number, <span class="number">10</span> ) > <span class="number">50</span>;
}
});
</code></pre>
<h2 id="sorting">Sorting</h2>
<h3 id="getsortdata">getSortData</h3>
<p>Isotope reads data from HTML with the <code>getSortData</code> option. See <a href="sorting.html#getsortdata">Sorting: <code>getSortData</code></a>.</p>
<p><code>getSortData</code> is set with an object. The object’s keys are keywords used to sort by. Object values are either a shortcut string or function to retrieve the data.</p>
<pre><code class="js"><span class="keyword">var</span> <span class="jquery_var">$grid</span> = $(<span class="string">'.grid'</span>).isotope({
getSortData: {
name: <span class="string">'.name'</span>, <span class="comment">// text from querySelector</span>
category: <span class="string">'[data-category]'</span>, <span class="comment">// value of attribute</span>
weight: <span class="function"><span class="keyword">function</span><span class="params">( itemElem )</span> </span>{ <span class="comment">// function</span>
<span class="keyword">var</span> weight = $( itemElem ).find(<span class="string">'.weight'</span>).text();
<span class="keyword">return</span> <span class="built_in">parseFloat</span>( weight.replace( <span class="regexp">/[\(\)]/g</span>, <span class="string">''</span>) );
}
}
});
</code></pre>
<h3 id="sortby">sortBy</h3>
<p>Sorts items according to which property of <code>getSortData</code>. See <a href="sorting.html#sortby">Sorting: <code>sortBy</code></a>. The value of <code>sortBy</code> needs to match a key name in <code>getSortData</code>.</p>
<pre><code class="js"><span class="jquery_var">$grid</span>.isotope({
getSortData: {
number: <span class="string">'.number parseInt'</span>
},
sortBy : <span class="string">'number'</span>
});
</code></pre>
<p>Two additional <code>sortBy</code> options are built in.</p>
<pre><code class="js"><span class="jquery_var">$grid</span>.isotope({ sortBy : <span class="string">'original-order'</span> });
<span class="comment">// original order of the item elements</span>
<span class="jquery_var">$grid</span>.isotope({ sortBy : <span class="string">'random'</span> });
<span class="comment">// random order</span>
</code></pre>
<p>To sort by multiple properties, you can set <code>sortBy</code> to an array of key names.</p>
<pre><code class="js"><span class="comment">// sort by color, then number</span>
sortBy: [ <span class="string">'color'</span>, <span class="string">'number'</span> ]
</code></pre>
<h3 id="sortascending">sortAscending</h3>
<p>Sorts items ascendingly if <code>sortAscending: <span class="literal">true</span></code> “A, B, C…”, “1, 2, 3…”, or descendingly if <code>sortAscending: <span class="literal">false</span></code>, “Z, Y, X…”, “9, 8, 7…”.</p>
<pre><code class="js"><span class="comment">// sort by number, highest number first</span>
<span class="jquery_var">$grid</span>.isotope({
sortBy: <span class="string">'number'</span>,
sortAscending: <span class="literal">false</span>
});
</code></pre>
<p>You can set ascending order for each <code>sortBy</code> value by setting <code>sortAscending</code> to an object.</p>
<pre><code class="js">sortAscending: {
name: <span class="literal">true</span>, <span class="comment">// name ascendingly</span>
weight: <span class="literal">false</span>, <span class="comment">// weight descendingly</span>
category: <span class="literal">true</span>, <span class="comment">// category ascendingly</span>
number: <span class="literal">false</span> <span class="comment">// number descendingly</span>
}
</code></pre>
<h2 id="transitions">Transitions</h2>
<h3 id="transitionduration">transitionDuration</h3>
<p>Duration of the transition when items change position or appearance, set in a CSS time format. Default: <code><span class="comment">transitionDuration: '0.4s'</span></code></p>
<pre><code class="js"><span class="comment">// fast transitions</span>
transitionDuration: <span class="string">'0.2s'</span>
<span class="comment">// slow transitions</span>
transitionDuration: <span class="string">'0.8s'</span>
<span class="comment">// no transitions</span>
transitionDuration: <span class="number">0</span>
</code></pre>
<h3 id="hiddenstyle-visiblestyle">hiddenStyle & visibleStyle</h3>
<p>The styles applied to hide and reveal items when filtering.</p>
<pre><code class="js"><span class="comment">/* default
hiddenStyle: {
opacity: 0,
transform: 'scale(0.001)'
},
visibleStyle: {
opacity: 1,
transform: 'scale(1)'
}
*/</span>
<span class="jquery_var">$grid</span>.isotope({
<span class="comment">// disable scale transform transition when hiding</span>
hiddenStyle: {
opacity: <span class="number">0</span>
},
visibleStyle: {
opacity: <span class="number">1</span>
}
})
</code></pre>
<p class="edit-demo">
<a href="http://codepen.io/desandro/pen/lxzDA">Edit this demo on CodePen</a>
</p>
</div>
</div>
<div class="site-footer">
<div class="primary-content">
<p class="footer-copy">Follow <a href="https://twitter.com/metafizzyco">@metafizzyco on Twitter for Isotope updates</a></p>
</div>
<div class="site-footer__brand">
<a class="site-footer__brand__logo" href="http://metafizzy.co">M<span class="etafizzy">etafizzy</span></a>
<span class="site-footer__brand__copyright">© 2011–2015</span>
</div>
</div>
<!-- Looking for isotope.js? Use isotope.pkgd.min.js -->
<!-- Isotope does NOT require jQuery. But it does make things easier -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/jquery.min.js"><\/script>')</script>
<script src="js/isotope-docs.min.js"></script>
<!-- Google Analytics - Remove this if you copy/pasted this page -->
<script>
// Google Analytics
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-58739927-3','auto');ga('send','pageview');
</script>
</body>
</html>