File: D:/web/expressmusic/isotope-docs/isotope-docs/layout-modes.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 · Layout modes</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/layout-modes.html">
<meta name="twitter:title" content="Isotope Layout modes">
<meta name="twitter:description" content="filter & sort magical layouts">
</head>
<body class="page--layout-modes" data-page="layout-modes">
<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="#layout-mode-options">Layout mode options</a></li>
<li class="page-nav__item page-nav__item--h2"><a href="#horizontal-layouts">Horizontal layouts</a></li>
<li class="page-nav__item page-nav__item--h2"><a href="#included-layout-modes">Included layout modes</a></li>
<li class="page-nav__item page-nav__item--h2"><a href="#layout-modes">Layout modes</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#masonry">masonry</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#fitrows">fitRows</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#vertical">vertical</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#packery">packery</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#cellsbyrow">cellsByRow</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#masonryhorizontal">masonryHorizontal</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#fitcolumns">fitColumns</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#cellsbycolumn">cellsByColumn</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#horizontal">horizontal</a></li>
</ul>
</div>
<div id="content" class="main">
<div class="primary-content">
<h1>Layout modes</h1>
<p>Isotope can position items with different layout modes. Set and change the layout mode with the <code>layoutMode</code> option.</p>
<div class="big-demo go-wide" data-js-module="layout-modes-demo">
<div class="button-group js-radio-button-group">
<button class="button is-checked" data-layout-mode="masonry" checked="checked">masonry</button>
<button class="button" data-layout-mode="fitRows">fitRows</button>
<button class="button" data-layout-mode="cellsByRow">cellsByRow</button>
<button class="button" data-layout-mode="vertical">vertical</button>
<button class="button" data-layout-mode="packery">packery</button>
<button class="button" data-layout-mode="masonryHorizontal" data-is-horizontal="true">masonryHorizontal</button>
<button class="button" data-layout-mode="fitColumns" data-is-horizontal="true">fitColumns</button>
<button class="button" data-layout-mode="cellsByColumn" data-is-horizontal="true">cellsByColumn</button>
<button class="button" data-layout-mode="horizontal" data-is-horizontal="true">horizontal</button>
</div>
<pre class="code-display"><code>$grid.isotope({...})</code></pre>
<div class="grid">
<div class="grid-splash-item grid-splash-item--width2">1</div>
<div class="grid-splash-item grid-splash-item--height2">2</div>
<div class="grid-splash-item">3</div>
<div class="grid-splash-item">4</div>
<div class="grid-splash-item grid-splash-item--width2 grid-splash-item--height2">5</div>
<div class="grid-splash-item grid-splash-item--width2">6</div>
<div class="grid-splash-item grid-splash-item--height2">7</div>
<div class="grid-splash-item">8</div>
<div class="grid-splash-item">9</div>
<div class="grid-splash-item grid-splash-item--width2">10</div>
<div class="grid-splash-item">11</div>
<div class="grid-splash-item">12</div>
</div>
<p class="edit-demo">
<a href="http://codepen.io/desandro/pen/ClgeH">Edit this demo on CodePen</a>
</p>
</div>
<h2 id="layout-mode-options">Layout mode options</h2>
<p>Layout modes can have their own separate options. These are set in a corresponding object within the options.</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">// main isotope options</span>
itemSelector: <span class="string">'.grid-item'</span>,
<span class="comment">// set layoutMode</span>
layoutMode: <span class="string">'cellsByRow'</span>,
<span class="comment">// options for cellsByRow layout mode</span>
cellsByRow: {
columnWidth: <span class="number">200</span>,
rowHeight: <span class="number">150</span>
},
<span class="comment">// options for masonry layout mode</span>
masonry: {
columnWidth: <span class="string">'.grid-sizer'</span>
}
})
</code></pre>
<h2 id="horizontal-layouts">Horizontal layouts</h2>
<p>Horizontal layout modes (masonryHorizontal, fitColumns, cellsByColumn, and horizontal) need a container that has a height value. Be sure that your CSS has height set.</p>
<pre><code class="css"><span class="id">#container</span> <span class="rules">{
<span class="comment">/* either of these will work for horizontal Isotope layouts */</span>
<span class="rule"><span class="attribute">height</span>:<span class="value"> <span class="number">80%</span></span></span>;
<span class="rule"><span class="attribute">height</span>:<span class="value"> <span class="number">480px</span></span></span>;
}</span>
</code></pre>
<h2 id="included-layout-modes">Included layout modes</h2>
<p><code>masonry</code>, <code>fitRows</code>, and <code>vertical</code> are included in Isotope by default. All other layout modes need to installed separately.</p>
<h2 id="layout-modes">Layout modes</h2>
<h3 id="masonry">masonry</h3>
<p>The default layout mode. Items are arranged in a vertically cascading grid.</p>
<p><a href="layout-modes/masonry.html">See masonry layout mode</a>.</p>
<div class="duo example">
<div class="duo__cell example__code">
<pre><code class="js">masonry: {
columnWidth: <span class="number">50</span>
}
</code></pre>
</div>
<div class="duo__cell example__demo">
<div class="grid grid--counting 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--width2"></div>
<div class="grid-item"></div>
</div>
<p class="edit-demo">
<a href="http://codepen.io/desandro/pen/mEinp">Edit this demo on CodePen</a>
</p>
</div>
</div>
<h3 id="fitrows">fitRows</h3>
<p>Items are arranged into rows. Rows progress vertically. Similar to what you would expect from a layout that uses CSS floats. fitRows works well for items that have the same height.</p>
<p><a href="layout-modes/fitrows.html">See fitRows layout mode</a>.</p>
<div class="duo example">
<div class="duo__cell example__code">
<pre><code class="js">layoutMode: <span class="string">'fitRows'</span>
</code></pre>
</div>
<div class="duo__cell example__demo">
<div class="grid grid--counting js-isotope" data-isotope-options="{ "layoutMode": "fitRows" }">
<div class="grid-item"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item"></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--width2"></div>
<div class="grid-item grid-item--width3"></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--width3"></div>
</div>
<p class="edit-demo">
<a href="http://codepen.io/desandro/pen/nCskp">Edit this demo on CodePen</a>
</p>
</div>
</div>
<h3 id="vertical">vertical</h3>
<p>Items are stacked vertically.</p>
<p><a href="layout-modes/vertical.html">See vertical layout mode</a>.</p>
<div class="duo example">
<div class="duo__cell example__code">
<pre><code class="js">layoutMode: <span class="string">'vertical'</span>
</code></pre>
</div>
<div class="duo__cell example__demo">
<div class="grid grid--counting js-isotope" data-isotope-options="{ "layoutMode": "vertical" }">
<div class="grid-item grid-item--width2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width3"></div>
<div class="grid-item grid-item--width2"></div>
<div class="grid-item grid-item--width2 grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width3"></div>
</div>
<p class="edit-demo">
<a href="http://codepen.io/desandro/pen/oXxepd">Edit this demo on CodePen</a>
</p>
</div>
</div>
<h3 id="packery">packery</h3>
<p>The <code>packery</code> layout mode uses a bin-packing algorithm. This is a fancy way of saying “it fills empty gaps.” It works similarly to <code>masonry</code>, except gaps will be filled.</p>
<p><a href="layout-modes/packery.html">See <code>packery</code> layout mode</a>.</p>
<div class="duo example">
<div class="duo__cell example__code">
<pre><code class="js">layoutMode: <span class="string">'packery'</span>
</code></pre>
</div>
<div class="duo__cell example__demo">
<div class="grid grid--counting js-isotope" data-isotope-options="{ "layoutMode": "packery" }">
<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/vdwmb">Edit this demo on CodePen</a>
</p>
</div>
</div>
<h3 id="cellsbyrow">cellsByRow</h3>
<p>A vertical grid layout where items are centered inside each cell. The grid is defined by <code>columnWidth</code> and <code>rowHeight</code> options.</p>
<p><a href="layout-modes/cellsbyrow.html">See cellsByRow layout mode</a>.</p>
<div class="duo example">
<div class="duo__cell example__code">
<pre><code class="js">layoutMode: <span class="string">'cellsByRow'</span>,
cellsByRow: {
columnWidth: <span class="number">110</span>,
rowHeight: <span class="number">110</span>
}
</code></pre>
</div>
<div class="duo__cell example__demo">
<div class="grid grid--counting js-isotope" data-isotope-options="{ "layoutMode": "cellsByRow", "cellsByRow": { "columnWidth": 110, "rowHeight": 110 } }">
<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/zFart">Edit this demo on CodePen</a>
</p>
</div>
</div>
<h3 id="masonryhorizontal">masonryHorizontal</h3>
<p>Horizontal version of masonry. Items are arranged in a horizontally cascading grid.</p>
<p><a href="layout-modes/masonryhorizontal.html">See <code>masonryHorizontal</code> layout mode</a>.</p>
<div class="duo example">
<div class="duo__cell example__code">
<pre><code class="js">layoutMode: <span class="string">'masonryHorizontal'</span>,
masonryHorizontal: {
rowHeight: <span class="number">50</span>
}
</code></pre>
</div>
<div class="duo__cell example__demo">
<div class="grid grid--counting grid--horizontal js-isotope horizontal counting" data-isotope-options="{ "layoutMode": "masonryHorizontal", "masonryHorizontal": { "rowHeight": 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--width2"></div>
<div class="grid-item"></div>
</div>
<p class="edit-demo">
<a href="http://codepen.io/desandro/pen/oCiAD">Edit this demo on CodePen</a>
</p>
</div>
</div>
<h3 id="fitcolumns">fitColumns</h3>
<p>Items are arranged into columns. Columns progress horizontally.</p>
<p><code>fitColumns</code> works well with items that have the same width.</p>
<p><a href="layout-modes/fitcolumns.html">See <code>fitColumns</code> layout mode</a>.</p>
<div class="duo example">
<div class="duo__cell example__code">
<pre><code class="js">layoutMode: <span class="string">'fitColumns'</span>
</code></pre>
</div>
<div class="duo__cell example__demo">
<div class="grid grid--counting grid--horizontal js-isotope" data-isotope-options="{ "layoutMode": "fitColumns" }">
<div class="grid-item"></div>
<div class="grid-item 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"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item grid-item--height3"></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--height3"></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 class="grid-item grid-item--height2"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
</div>
<p class="edit-demo">
<a href="http://codepen.io/desandro/pen/zEAwi">Edit this demo on CodePen</a>
</p>
</div>
</div>
<h3 id="cellsbycolumn">cellsByColumn</h3>
<p>A horizontal grid layout where items are centered inside each cell. The grid is defined by <code>columnWidth</code> and <code>rowHeight</code> options.</p>
<p><a href="layout-modes/cellsbycolumn.html">See <code>cellsByColumn</code> layout mode</a>.</p>
<pre><code class="js">layoutMode: <span class="string">'cellsByColumn'</span>,
cellsByColumn: {
columnWidth: <span class="number">110</span>,
rowHeight: <span class="number">110</span>
}
</code></pre>
<div class="example">
<div class="grid grid--counting grid--horizontal js-isotope" data-isotope-options="{ "layoutMode": "cellsByColumn", "cellsByColumn": { "columnWidth": 110, "rowHeight": 110 } }">
<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/qAlEy">Edit this demo on CodePen</a>
</p>
</div>
<h3 id="horizontal">horizontal</h3>
<p>Items are arranged horizontally.</p>
<p><a href="layout-modes/horizontal.html">See <code>horizontal</code> layout mode</a>.</p>
<pre><code class="js">layoutMode: <span class="string">'horizontal'</span>
</code></pre>
<div class="example">
<div class="grid grid--counting grid--horizontal js-isotope" data-isotope-options="{ "layoutMode": "horizontal" }">
<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 grid-item--height3"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--width2 grid-item--height2"></div>
<div class="grid-item grid-item--height3"></div>
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item grid-item--height3"></div>
</div>
<p class="edit-demo">
<a href="http://codepen.io/desandro/pen/uGetl">Edit this demo on CodePen</a>
</p>
</div>
</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>