Download raw (17.9 KB)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Tumblelog example · 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="demos ">
<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><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 class="current"><a href="#content">Tumblelog example</a></li>
<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>Tumblelog example</h1>
<div id="copy">
<p>A tumblelog is a good example of a typical use case for Masonry.</p>
<p>There are three sizes of columns used:</p>
<div class="highlight"><pre><code class="css"><span class="nf">#tumblelog</span> <span class="nc">.col1</span> <span class="p">{</span> <span class="k">width</span><span class="o">:</span> <span class="m">220px</span><span class="p">;</span> <span class="p">}</span>
<span class="nf">#tumblelog</span> <span class="nc">.col2</span> <span class="p">{</span> <span class="k">width</span><span class="o">:</span> <span class="m">460px</span><span class="p">;</span> <span class="p">}</span>
<span class="nf">#tumblelog</span> <span class="nc">.col3</span> <span class="p">{</span> <span class="k">width</span><span class="o">:</span> <span class="m">700px</span><span class="p">;</span> <span class="p">}</span>
</code></pre>
</div>
<p>With 10px of margin on right and left sides that makes for a grid with columns 240px wide. </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">'tumblelog'</span><span class="p">),</span> <span class="p">{</span>
<span class="nx">columnWidth</span><span class="o">:</span> <span class="mi">240</span>
<span class="p">});</span>
<span class="p">};</span>
</code></pre>
</div>
</div>
<div id="tumblelog" class="clearfix">
<div class="story col2">
<h2>Last Day Dream</h2>
<p>
<object width="460" height="265"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=4155700&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=ff4000&fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=4155700&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=ff4000&fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="460" height="265"></embed></object>
</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="story col1">
<blockquote>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</blockquote>
<p>— Marcus Aurelius</p>
</div>
<div class="story col1">
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="story col2">
<p>
<a href="http://www.flickr.com/photos/george_eastman_house/3123693806/in/set-72157611386593623"><img src="http://farm4.static.flickr.com/3121/3123693806_4cb1ca16d9.jpg" alt="" /></a>
</p>
</div>
<div class="story col1">
<p>
<a href="http://www.flickr.com/photos/george_eastman_house/3123692308/in/set-72157611386593623">
<img src="http://farm4.static.flickr.com/3282/3123692308_9e81bc4d14.jpg" alt="" />
</a>
</p>
<p>[PARENTS MAGAZINE, GIRL WITH CAT]</p>
</div>
<div class="story col1">
<blockquote>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</p>
</blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="story col2">
<object width="460" height="265"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=6185327&server=vimeo.com&show_title=1&show_byline=1&show_portrait=1&color=dd4499&fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=6185327&server=vimeo.com&show_title=1&show_byline=1&show_portrait=1&color=dd4499&fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="460" height="265"></embed></object>
</div>
<div class="story col2">
<h2>Ut enim ad minim veniam</h2>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. <a href="#">Mauris placerat eleifend leo.</a> Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div class="story col3">
<h3>Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</h3>
<h3>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. <a href="#">Mauris placerat eleifend leo.</a></h3>
</div>
<div class="story col1">
<h3>feugiat vitae, ultricies eget</h3>
<a href="http://www.flickr.com/photos/library_of_congress/2179137415/"><img src="http://farm3.static.flickr.com/2109/2179137415_0e63ebb36e_m.jpg" alt="" /></a>
</div>
<div class="story col2">
<h2>A Tremendous Celebration</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ol>
</div>
<div class="story col2">
<h2>And of Deliberate Consequences</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ol>
<h3>Aenean ultricies mi</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<h3>Vestibulum tortor quam</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div class="story col1">
<blockquote>
<p>Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
</p>
</blockquote>
</div>
<div class="story col1">
<p>
<a href="http://www.flickr.com/photos/library_of_congress/2179136893/" title="Women workers install fixtures and assemblies to a tail fuselage section of a B-17F bomber at the Douglas Aircraft Company, Long Beach, Calif. Better known as the "Flying Fortress," the B-17F is a later model of the B-17 which distinguished itself in acti by The Library of Congress, on Flickr"><img src="http://farm3.static.flickr.com/2186/2179136893_a12b3ace56_m.jpg" alt="Women workers install fixtures and assemblies to a tail fuselage section of a B-17F bomber at the Douglas Aircraft Company, Long Beach, Calif. Better known as the "Flying Fortress," the B-17F is a later model of the B-17 which distinguished itself in acti"></a>
</p>
<p>
Women workers install fixtures and assemblies to a tail fuselage section of a B-17F bomber at the Douglas Aircraft Company, Long Beach, Calif. Better known as the "Flying Fortress," the B-17F is a later model of the B-17 which distinguished itself in action in the South Pacific, over Germany and elsewhere. It is a long range, high altitude heavy bomber, with a crew of seven to nine men, and with armament sufficient to defend itself on daylight missions
</p>
</div>
<div class="story col1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<p><em>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</em> consequat. <strong>Duis aute irure dolor in reprehenderit</strong> in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="story col1">
<p>
<a href="http://www.flickr.com/photos/library_of_congress/2178407555/"><img src="http://farm3.static.flickr.com/2008/2178407555_9a9bcfe31f_m.jpg" height="240" alt="" /></a>
</p>
</div>
<div class="story col3">
<object width="700" height="394"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=7174318&server=vimeo.com&show_title=1&show_byline=1&show_portrait=1&color=dd4499&fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=7174318&server=vimeo.com&show_title=1&show_byline=1&show_portrait=1&color=dd4499&fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="700" height="394"></embed></object>
</div>
<div class="story col1">
<blockquote>
<p>Sing, O goddess, the anger of Achilles son of Peleus, that brought countless ills upon the Achaeans. Many a brave soul did it send hurrying down to Hades, and many a hero did it yield a prey to dogs and vultures, for so were the counsels of Jove fulfilled from the day on which the son of Atreus, king of men, and great Achilles, first fell out with one another.</p>
</blockquote>
<cite><a href="http://classics.mit.edu/Homer/iliad.1.i.html">Homer — The Iliad</a></cite>
</div>
<div class="story col1">
<h2>Aliens attack South Dakota</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<blockquote><p>Yes, it did happen.</p></blockquote>
<p><em>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</em> consequat. <strong>Duis aute irure dolor in reprehenderit</strong> in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="story col3">
<p style="float: right; margin-left: 20px"><a href="http://www.flickr.com/photos/george_eastman_house/3122875223/in/set-72157611386593623/"><img src="http://farm4.static.flickr.com/3197/3122875223_917b1ccafc.jpg" alt="McCall Cover, Joan Caulfield" /></a></p>
<h2>And then, there is this.</h2>
<p class="caption"><a href="http://www.flickr.com/photos/george_eastman_house/3122875223/in/set-72157611386593623/"><em>McCall Cover, Joan Caulfield</em> by Nickolas Muray</a></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div> <!-- /#tumblelog -->
<script src="../masonry.min.js"></script>
<script>
window.onload = function() {
var wall = new Masonry( document.getElementById('tumblelog'), {
columnWidth: 240
});
};
</script>
<footer id="site-footer">
Vanilla Masonry by <a href="http://desandro.com">David DeSandro</a>
</footer>
</section> <!-- #content -->
</body>
</html>