Download raw (9.7 KB)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Methods · 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 ">
<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><a href="../docs/options.html">Options</a>
<li class="current"><a href="#content">Methods</a>
<ul class="toc">
<li><a href="#appended">appended</a></li>
<li><a href="#build">build</a></li>
<li><a href="#destroy">destroy</a></li>
<li><a href="#layout">layout</a></li>
<li><a href="#reloaditems">reloadItems</a></li>
<li><a href="#reload">reload</a></li>
</ul>
</li>
<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>Methods</h1>
<p>Masonry offers several methods to extend functionality. Methods are called on an Masonry instance</p>
<div class='highlight'><pre><code class='javascript'><span class='c1'>// wall is an instance of Masonry</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='nx'>element</span><span class='p'>,</span> <span class='nx'>options</span> <span class='p'>);</span>
<span class='c1'>// reload is a method</span>
<span class='nx'>wall</span><span class='p'>.</span><span class='nx'>reload</span><span class='p'>();</span>
</code></pre>
</div>
<h2 id='appended'>appended</h2>
<div class='highlight'><pre><code class='javascript'><span class='nx'>masonryInstance</span><span class='p'>.</span><span class='nx'>appended</span><span class='p'>(</span> <span class='p'>[</span><span class='nx'>elements</span><span class='p'>],</span> <span class='nx'>isAnimatedFromBottom</span> <span class='p'>);</span>
</code></pre>
</div>
<p>Triggers <code>.layout()</code> on an array of item elements that have been appended to the container. Setting the <code>isAnimatedFromBottom</code> argument to <code><span class='kc'>true</span></code> will enable the newly appended items to be animated from the bottom, if <a href='intro.html#css_transitions'>CSS transitions</a> are enabled.</p>
<p><a href='../demos/adding-items.html'>See Demo: Adding items</a>.</p>
<div class='highlight'><pre><code class='javascript'><span class='kd'>var</span> <span class='nx'>container</span> <span class='o'>=</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='nx'>item1</span> <span class='o'>=</span> <span class='nb'>document</span><span class='p'>.</span><span class='nx'>createElement</span><span class='p'>(</span><span class='s1'>'div'</span><span class='p'>),</span>
<span class='nx'>item2</span> <span class='o'>=</span> <span class='nb'>document</span><span class='p'>.</span><span class='nx'>createElement</span><span class='p'>(</span><span class='s1'>'div'</span><span class='p'>);</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='nx'>container</span><span class='p'>,</span> <span class='p'>{</span> <span class='nx'>columnWidth</span><span class='o'>:</span> <span class='mi'>100</span> <span class='p'>});</span>
<span class='nx'>container</span><span class='p'>.</span><span class='nx'>appendChild</span><span class='p'>(</span> <span class='nx'>item1</span> <span class='p'>);</span>
<span class='nx'>container</span><span class='p'>.</span><span class='nx'>appendChild</span><span class='p'>(</span> <span class='nx'>item2</span> <span class='p'>);</span>
<span class='nx'>wall</span><span class='p'>.</span><span class='nx'>appended</span><span class='p'>(</span> <span class='p'>[</span> <span class='nx'>item1</span><span class='p'>,</span> <span class='nx'>item2</span> <span class='p'>]</span> <span class='p'>);</span>
</code></pre>
</div>
<h2 id='build'>build</h2>
<div class='highlight'><pre><code class='javascript'><span class='nx'>masonryInstance</span><span class='p'>.</span><span class='nx'>build</span><span class='p'>();</span>
</code></pre>
</div>
<p>Positions all items in the Masonry instance.</p>
<h2 id='destroy'>destroy</h2>
<div class='highlight'><pre><code class='javascript'><span class='nx'>masonryInstance</span><span class='p'>.</span><span class='nx'>destroy</span><span class='p'>();</span>
</code></pre>
</div>
<p>Removes Masonry functionality completely. Returns element back to pre-initialized state.</p>
<h2 id='layout'>layout</h2>
<div class='highlight'><pre><code class='javascript'><span class='nx'>masonryInstance</span><span class='p'>.</span><span class='nx'>layout</span><span class='p'>(</span> <span class='p'>[</span><span class='nx'>elements</span><span class='p'>]</span> <span class='p'>);</span>
</code></pre>
</div>
<p>Positions an array of item elements in layout.</p>
<p><code>.layout()</code> will only position specified elements, and those elements will be positioned at the end of layout. Whereas <code>.build()</code> will position all items in the Masonry instance.</p>
<h2 id='reloaditems'>reloadItems</h2>
<div class='highlight'><pre><code class='javascript'><span class='nx'>masonryInstance</span><span class='p'>.</span><span class='nx'>reloadItems</span><span class='p'>()</span>
</code></pre>
</div>
<p>Re-collects all item elements in their current order in the DOM for the masonry instance.</p>
<h2 id='reload'>reload</h2>
<div class='highlight'><pre><code class='javascript'><span class='nx'>masonryInstance</span><span class='p'>.</span><span class='nx'>reload</span><span class='p'>()</span>
</code></pre>
</div>
<p>Convenience method for triggering <code>.reloadItems()</code> then <code>.build()</code>. Useful for prepending or inserting items.</p>
<p><a href='../demos/adding-items.html'>See Demo: Adding items</a>.</p>
<div class='highlight'><pre><code class='javascript'><span class='kd'>var</span> <span class='nx'>container</span> <span class='o'>=</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='nx'>item1</span> <span class='o'>=</span> <span class='nb'>document</span><span class='p'>.</span><span class='nx'>createElement</span><span class='p'>(</span><span class='s1'>'div'</span><span class='p'>),</span>
<span class='nx'>item2</span> <span class='o'>=</span> <span class='nb'>document</span><span class='p'>.</span><span class='nx'>createElement</span><span class='p'>(</span><span class='s1'>'div'</span><span class='p'>);</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='nx'>container</span><span class='p'>,</span> <span class='p'>{</span> <span class='nx'>columnWidth</span><span class='o'>:</span> <span class='mi'>100</span> <span class='p'>});</span>
<span class='nx'>container</span><span class='p'>.</span><span class='nx'>insertBefore</span><span class='p'>(</span> <span class='nx'>item1</span><span class='p'>,</span> <span class='nx'>container</span><span class='p'>.</span><span class='nx'>firstChild</span> <span class='p'>);</span>
<span class='nx'>container</span><span class='p'>.</span><span class='nx'>insertBefore</span><span class='p'>(</span> <span class='nx'>item2</span><span class='p'>,</span> <span class='nx'>container</span><span class='p'>.</span><span class='nx'>firstChild</span> <span class='p'>);</span>
<span class='nx'>wall</span><span class='p'>.</span><span class='nx'>reload</span><span class='p'>();</span>
</code></pre>
</div>
<footer id="site-footer">
Vanilla Masonry by <a href="http://desandro.com">David DeSandro</a>
</footer>
</section> <!-- #content -->
</body>
</html>