Download raw (7.5 KB)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Options · Vanilla Masonry</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<link rel="stylesheet" href="../css/style.css" />
<!-- scripts at bottom of page -->
</head>
<body class="docs options">
<nav id="site-nav">
<h1><a href="../index.html">Vanilla Masonry</a></h1>
<h2>Docs</h2>
<ul class="docs-list">
<li><a href="../docs/intro.html">Introduction</a>
<li class="current"><a href="#content">Options</a>
<ul class="toc">
<li><a href="#columnwidth">columnWidth</a></li>
<li><a href="#gutterwidth">gutterWidth</a></li>
<li><a href="#isfitwidth">isFitWidth</a></li>
<li><a href="#isresizable">isResizable</a></li>
<li><a href="#isrtl">isRTL</a></li>
</ul>
</li>
<li><a href="../docs/methods.html">Methods</a>
<li><a href="../docs/help.html">Help</a>
</ul>
<h2>Demos</h2>
<ul class="demos-list">
<li><a href="../demos/basic-single-column.html">Basic single-column</a>
<li><a href="../demos/basic-multi-column.html">Basic multi-column</a>
<li><a href="../demos/images.html">Images</a>
<li><a href="../demos/tumblelog.html">Tumblelog example</a>
<li><a href="../demos/adding-items.html">Adding items</a>
<li><a href="../demos/gutters.html">Gutters</a>
<li><a href="../demos/right-to-left.html">Right-to-left</a>
<li><a href="../demos/centered.html">Centered</a>
<li><a href="../demos/fluid.html">Fluid</a>
</ul>
</nav> <!-- #site-nav -->
<section id="content">
<h1>Options</h1>
<p>Options are set with an object as the second argument to the <code>Masonry</code> constructor. All options are optional, and do not need to be set, but <a href='#columnwidth'><code>columnWidth</code></a> is recommended.</p>
<div class='highlight'><pre><code class='javascript'><span class='nb'>window</span><span class='p'>.</span><span class='nx'>onload</span> <span class='o'>=</span> <span class='kd'>function</span><span class='p'>()</span> <span class='p'>{</span>
<span class='c1'>// initialize Masonry instance</span>
<span class='kd'>var</span> <span class='nx'>wall</span> <span class='o'>=</span> <span class='k'>new</span> <span class='nx'>Masonry</span><span class='p'>(</span> <span class='nb'>document</span><span class='p'>.</span><span class='nx'>getElementById</span><span class='p'>(</span><span class='s1'>'container'</span><span class='p'>),</span> <span class='p'>{</span>
<span class='c1'>// options...</span>
<span class='nx'>columnWidth</span><span class='o'>:</span> <span class='mi'>240</span><span class='p'>,</span>
<span class='nx'>gutterWidth</span><span class='o'>:</span> <span class='mi'>20</span><span class='p'>,</span>
<span class='nx'>isFitWidth</span><span class='o'>:</span> <span class='kc'>true</span>
<span class='p'>});</span>
<span class='c1'>// change an option after initialization</span>
<span class='nx'>wall</span><span class='p'>.</span><span class='nx'>options</span><span class='p'>.</span><span class='nx'>columnWidth</span> <span class='o'>=</span> <span class='mi'>200</span><span class='p'>;</span>
<span class='p'>};</span>
</code></pre>
</div><dl class='header clearfix'>
<dt><code>option</code></dt>
<dd class='option-type'>Type</dd>
<dd class='default'>Default</dd>
</dl>
<h2 id='columnwidth'>columnWidth</h2>
<dl class='clearfix'>
<dt><code>columnWidth</code></dt>
<dd class='option-type'>Integer or Function</dd>
</dl>
<p>Width in pixels of 1 column of your grid. If no columnWidth is specified, Masonry uses the width of the first item element. <strong>Recommended</strong> if your layout has item elements that have multiple-column widths.</p>
<p><a href='../demos/basic-multi-column.html'>See Demo: Basic multi-column</a>.</p>
<p>To set a dynamic column width, you can pass in a function that returns the value column width. The function provides an argument for the width of the container. Use this technique for fluid or responsive layouts.</p>
<div class='highlight'><pre><code class='javascript'><span class='kd'>var</span> <span class='nx'>wall</span> <span class='o'>=</span> <span class='k'>new</span> <span class='nx'>Masonry</span><span class='p'>(</span> <span class='nb'>document</span><span class='p'>.</span><span class='nx'>getElementById</span><span class='p'>(</span><span class='s1'>'container'</span><span class='p'>),</span> <span class='p'>{</span>
<span class='c1'>// dynamically set column width to 1/5 the width of the container</span>
<span class='nx'>columnWidth</span><span class='o'>:</span> <span class='kd'>function</span><span class='p'>(</span> <span class='nx'>containerWidth</span> <span class='p'>)</span> <span class='p'>{</span>
<span class='k'>return</span> <span class='nx'>containerWidth</span> <span class='o'>/</span> <span class='mi'>5</span><span class='p'>;</span>
<span class='p'>}</span>
<span class='p'>});</span>
</code></pre>
</div>
<p><a href='../demos/fluid.html'>See Demo: Fluid</a>.</p>
<h2 id='gutterwidth'>gutterWidth</h2>
<dl class='clearfix'>
<dt><code>gutterWidth</code></dt>
<dd class='option-type'>Integer</dd>
<dd class='default'><code><span class='mi'>0</span></code></dd>
</dl>
<p>Adds additional spacing between columns.</p>
<p><a href='../demos/gutters.html'>See Demo: Gutters</a>.</p>
<h2 id='isfitwidth'>isFitWidth</h2>
<dl class='clearfix'>
<dt><code>isFitWidth</code></dt>
<dd class='option-type'>Boolean</dd>
<dd class='default'><code><span class='kc'>false</span></code></dd>
</dl>
<p>If enabled, Masonry will size the width of the container to the nearest column. When enabled, Masonry will measure the width of the container’s parent element, not the width of the container. This option is ideal for centering Masonry layouts.</p>
<p><a href='../demos/centered.html'>See Demo: Centered</a>.</p>
<h2 id='isresizable'>isResizable</h2>
<dl class='clearfix'>
<dt><code>isResizable</code></dt>
<dd class='option-type'>Boolean</dd>
<dd class='default'><code><span class='kc'>true</span></code></dd>
</dl>
<p>Triggers layout logic when browser window is resized.</p>
<h2 id='isrtl'>isRTL</h2>
<dl class='clearfix'>
<dt><code>isRTL</code></dt>
<dd class='option-type'>Boolean</dd>
<dd class='default'><code><span class='kc'>false</span></code></dd>
</dl>
<p>Enables right-to-left layout for languages like Hebrew and Arabic.</p>
<p><a href='../demos/right-to-left.html'>See Demo: Right-to-left</a>.</p>
<footer id="site-footer">
Vanilla Masonry by <a href="http://desandro.com">David DeSandro</a>
</footer>
</section> <!-- #content -->
</body>
</html>