Download raw (8.3 KB)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Help · 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><a href="../docs/methods.html">Methods</a>
<li class="current"><a href="#content">Help</a>
<ul class="toc">
<li><a href="#reporting_bugs_and_issues">Reporting bugs and issues</a></li>
<li><a href="#jquery_masonry">jQuery Masonry</a></li>
<li><a href="#additional_resources">Additional resources</a></li>
<li><a href="#unloaded_media_and_overlapping">Unloaded media and overlapping</a></li>
<li><a href="#dom_ready">DOM ready</a></li>
</ul>
</li>
</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>Help</h1>
<p>Masonry is a fairly popular script. Chances are your issue has already been encountered by someone else.</p>
<h2 id='reporting_bugs_and_issues'>Reporting bugs and issues</h2>
<p><a href='http://github.com/desandro/vanilla-masonry/issues'>Report bugs and issues on GitHub</a>.</p>
<h3 id='issues-guidelines'>Guidelines</h3>
<ul>
<li>Look over open and closed issues before submitting yours.</li>
<li>Add a link to a live site with the bug. If the project is confidential, try re-creating it in <a href='http://jsfiddle.net'>jsFiddle</a>.</li>
</ul>
<p>The issues tracker is for bugs and issues – when Masonry doesn’t work as expected. It is not for implementation issues – when you are having trouble setting up Masonry. I am unable to personally help with implementation issues but <a href='http://metafizzy.co/blog/frustrated-stuck-tired-defeated/'>don’t give up</a>!</p>
<h2 id='jquery_masonry'>jQuery Masonry</h2>
<p><a href='http://masonry.desandro.com'>jQuery Masonry</a> is the original, more robust version of Masonry. Along with all the benefits of jQuery (easier DOM selection, document-ready function), it has several features missing from Vanilla Masonry:</p>
<ul>
<li>jQuery animation</li>
<li>itemSelector option</li>
<li>Infinite scroll integration</li>
<li>imagesLoaded plugin</li>
</ul>
<p>Vanilla Masonry has the advantage of being lightweight, without any frame dependency, best suited for small applications. jQuery Masonry is better suited for larger, complex applications, when jQuery is already being used.</p>
<h2 id='additional_resources'>Additional resources</h2>
<ul>
<li>The <a href='http://metafizzy.co/blog/'>Metafizzy blog</a> has posts that cover specialized use cases</li>
<li><a href='http://stackoverflow.com/search?q=masonry'>Stack Overflow questions about Masonry</a></li>
<li>Other resources that are <a href='http://www.delicious.com/desandro/likemasonrybutnot'>like Masonry but not</a></li>
</ul>
<h2 id='unloaded_media_and_overlapping'>Unloaded media and overlapping</h2>
<p>The number one issue that pops up is overlapping content. This is most likely due to unloaded images.</p>
<h3 id='on_window_load'>On window load</h3>
<p>Masonry should be initialized on window load so that images are loaded first.</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='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='p'>});</span>
<span class='p'>};</span>
</code></pre>
</div>
<p><a href='../demos/images.html'>See Demo: Images</a>.</p>
<h3 id='inline_dimensions'>Inline dimensions</h3>
<p>Or you can specify the width and height of images inline.</p>
<div class='highlight'><pre><code class='html'><span class='nt'><img</span> <span class='na'>src=</span><span class='s'>"img-file.jpg"</span> <span class='na'>width=</span><span class='s'>"280"</span> <span class='na'>height=</span><span class='s'>"160"</span> <span class='nt'>/></span>
</code></pre>
</div>
<p>If you’re using a PHP-based CMS, you can use the <a href='http://php.net/manual/en/function.getimagesize.php'>getimagesize</a> function.</p>
<h2 id='dom_ready'>DOM ready</h2>
<p>Instead of initializing Masonry with <code>window.onload</code>, you use a DOM ready script to kick things as soon as possible.</p>
<ul>
<li><a href='https://github.com/Integralist/DOMready'>DOMReady by Mark McDonnell</a></li>
<li><a href='https://github.com/ded/domready'>domready by Dustin Diaz</a></li>
<li>See also <a href='https://github.com/paulirish/lazyweb-requests/issues/27'>Paul Irish’s lazyweb request for a DOMContentLoaded shim</a></li>
</ul>
<p>For example, with <a href='https://github.com/Integralist/DOMready'>DOMReady</a>:</p>
<div class='highlight'><pre><code class='javascript'><span class='nx'>DOMready</span><span class='p'>(</span> <span class='kd'>function</span><span class='p'>()</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'>element</span><span class='p'>,</span> <span class='nx'>options</span> <span class='p'>);</span>
<span class='p'>});</span>
</code></pre>
</div>
<p>If you are targeting just modern browsers that support <code>DOMContentLoaded</code>:</p>
<div class='highlight'><pre><code class='javascript'><span class='nb'>window</span><span class='p'>.</span><span class='nx'>addEventListener</span><span class='p'>(</span> <span class='s1'>'DOMContentLoaded'</span><span class='p'>,</span> <span class='kd'>function</span><span class='p'>()</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'>element</span><span class='p'>,</span> <span class='nx'>options</span> <span class='p'>);</span>
<span class='p'>},</span> <span class='kc'>false</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>