File: D:/web/expressmusic/isotope-docs/isotope-docs/layout-modes/vertical.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 · vertical</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/vertical.html">
<meta name="twitter:title" content="Isotope vertical">
<meta name="twitter:description" content="filter & sort magical layouts">
</head>
<body class="page--vertical" data-page="vertical">
<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="#options">Options</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#horizontalalignment">horizontalAlignment</a></li>
</ul>
</div>
<div id="content" class="main">
<div class="primary-content">
<h1>vertical</h1>
<p>Items are arranged vertically. Useful for simple lists and table-like views.</p>
<div data-js-module="vertical-list">
<div class="button-group js-radio-button-group">
<button class="button is-checked" data-sort-by="original-order">original order</button>
<button class="button" data-sort-by="name">name</button>
<button class="button" data-sort-by="symbol">symbol</button>
<button class="button" data-sort-by="number">number</button>
<button class="button" data-sort-by="weight">weight</button>
<button class="button" data-sort-by="category">category</button>
</div>
<ul class="vertical-list">
<li class="vertical-list__item">
<div class="name">Mercury</div>
<div class="symbol">Hg</div>
<div class="number">80</div>
<div class="weight">200.59</div>
<div class="category">transition</div>
</li>
<li class="vertical-list__item">
<div class="name">Tellurium</div>
<div class="symbol">Te</div>
<div class="number">52</div>
<div class="weight">127.6</div>
<div class="category">metalloid</div>
</li>
<li class="vertical-list__item">
<div class="name">Bismuth</div>
<div class="symbol">Bi</div>
<div class="number">83</div>
<div class="weight">208.980</div>
<div class="category">post-transition</div>
</li>
<li class="vertical-list__item">
<div class="name">Lead</div>
<div class="symbol">Pb</div>
<div class="number">82</div>
<div class="weight">207.2</div>
<div class="category">post-transition</div>
</li>
<li class="vertical-list__item">
<div class="name">Gold</div>
<div class="symbol">Au</div>
<div class="number">79</div>
<div class="weight">196.967</div>
<div class="category">transition</div>
</li>
<li class="vertical-list__item">
<div class="name">Potassium</div>
<div class="symbol">K</div>
<div class="number">19</div>
<div class="weight">39.0983</div>
<div class="category">alkali</div>
</li>
<li class="vertical-list__item">
<div class="name">Sodium</div>
<div class="symbol">Na</div>
<div class="number">11</div>
<div class="weight">22.99</div>
<div class="category">alkali</div>
</li>
<li class="vertical-list__item">
<div class="name">Cadmium</div>
<div class="symbol">Cd</div>
<div class="number">48</div>
<div class="weight">112.411</div>
<div class="category">transition</div>
</li>
<li class="vertical-list__item">
<div class="name">Calcium</div>
<div class="symbol">Ca</div>
<div class="number">20</div>
<div class="weight">40.078</div>
<div class="category">alkaline-earth</div>
</li>
<li class="vertical-list__item">
<div class="name">Rhenium</div>
<div class="symbol">Re</div>
<div class="number">75</div>
<div class="weight">186.207</div>
<div class="category">transition</div>
</li>
<li class="vertical-list__item">
<div class="name">Thallium</div>
<div class="symbol">Tl</div>
<div class="number">81</div>
<div class="weight">204.383</div>
<div class="category">post-transition</div>
</li>
<li class="vertical-list__item">
<div class="name">Antimony</div>
<div class="symbol">Sb</div>
<div class="number">51</div>
<div class="weight">121.76</div>
<div class="category">metalloid</div>
</li>
<li class="vertical-list__item">
<div class="name">Cobalt</div>
<div class="symbol">Co</div>
<div class="number">27</div>
<div class="weight">58.933</div>
<div class="category">transition</div>
</li>
<li class="vertical-list__item">
<div class="name">Ytterbium</div>
<div class="symbol">Yb</div>
<div class="number">70</div>
<div class="weight">173.054</div>
<div class="category">lanthanoid</div>
</li>
<li class="vertical-list__item">
<div class="name">Argon</div>
<div class="symbol">Ar</div>
<div class="number">18</div>
<div class="weight">39.948</div>
<div class="category">noble-gas</div>
</li>
<li class="vertical-list__item">
<div class="name">Nitrogen</div>
<div class="symbol">N</div>
<div class="number">7</div>
<div class="weight">14.007</div>
<div class="category">diatomic</div>
</li>
<li class="vertical-list__item">
<div class="name">Uranium</div>
<div class="symbol">U</div>
<div class="number">92</div>
<div class="weight">238.029</div>
<div class="category">actinoid</div>
</li>
<li class="vertical-list__item">
<div class="name">Plutonium</div>
<div class="symbol">Pu</div>
<div class="number">94</div>
<div class="weight">(244)</div>
<div class="category">actinoid</div>
</li>
</ul>
<p class="edit-demo">
<a href="http://codepen.io/desandro/pen/pbwGC">Edit this demo on CodePen</a>
</p>
</div>
<h2 id="options">Options</h2>
<h3 id="horizontalalignment">horizontalAlignment</h3>
<p>Aligns items horizontally. Set as a decimal <code>0</code> to <code>1</code>.</p>
<pre><code class="js"><span class="comment">/* default
vertical: {
// align to origin edge
horizontalAlignment: 0
} */</span>
vertical: {
<span class="comment">// align to center</span>
horizontalAlignment: <span class="number">0.5</span>
}
vertical: {
<span class="comment">// align to opposite edge</span>
horizontalAlignment: <span class="number">1</span>
}
</code></pre>
<div class="duo example">
<div class="duo__cell example__code">
<pre><code class="js">layoutMode: <span class="string">'vertical'</span>,
vertical: {
horizontalAlignment: <span class="number">0.5</span>,
}
</code></pre>
</div>
<div class="duo__cell example__demo">
<div class="grid grid--horizontal js-isotope" data-isotope-options="{ "layoutMode": "vertical", "vertical": { "horizontalAlignment": 0.5 } }">
<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--height2"></div>
<div class="grid-item grid-item--width3"></div>
<div class="grid-item grid-item--width3"></div>
<div class="grid-item grid-item--width2"></div>
</div>
<p class="edit-demo">
<a href="http://codepen.io/desandro/pen/vhuIl">Edit this demo on CodePen</a>
</p>
</div>
</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>