Download raw (4.5 KB)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>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="homepage ">
<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><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">
<div id="container" class="clearfix">
<div class="item big-text col2">
A dynamic layout script for
the flip-side of CSS floats<br />
<br />
← View docs and demos
</div>
<div class="item big-text">
Before: CSS Floats
<div class="mini">
<div class="w1 h1">1</div>
<div class="w1 h1">2</div>
<div class="w1 h2">3</div>
<div class="w1 h1">4</div>
<div class="w2 h1">5</div>
<div class="w1 h2">6</div>
<div class="w1 h1">7</div>
<div class="w2 h2">8</div>
<div class="w2 h1">9</div>
<div class="w1 h1">10</div>
<div class="w2 h2">11</div>
<div class="w2 h1">12</div>
</div>
</div>
<div class="item big-text">
After: Masonry
<div id="mini-container" class="mini">
<div class="w1 h1">1</div>
<div class="w1 h1">2</div>
<div class="w1 h2">3</div>
<div class="w1 h1">4</div>
<div class="w2 h1">5</div>
<div class="w1 h2">6</div>
<div class="w1 h1">7</div>
<div class="w2 h2">8</div>
<div class="w2 h1">9</div>
<div class="w1 h1">10</div>
<div class="w2 h2">11</div>
<div class="w2 h1">12</div>
</div>
</div>
<div class="item link">
<a href="masonry.min.js">Download the script masonry.min.js</a>
</div>
<div class="item link">
<a href="http://meta.metafizzy.co/files/vanilla-masonry-site.zip">Download this project</a>
</div>
<div class="item link">
<a href="https://github.com/desandro/vanilla-masonry">Vanilla Masonry on GitHub</a>
</div>
<!-- <div class="item big-text loading">
<img src="http://i.imgur.com/6RMhx.gif" />
Loading Examples
</div> -->
</div> <!-- #container -->
<script src="masonry.min.js"></script>
<script>
window.onload = function() {
var miniWall = new Masonry( document.getElementById('mini-container'), {
columnWidth: 50,
foo: 'bar'
});
var wall = new Masonry( document.getElementById('container'), {
columnWidth: 240
});
};
</script>
<footer id="site-footer">
Vanilla Masonry by <a href="http://desandro.com">David DeSandro</a>
</footer>
</section> <!-- #content -->
</body>
</html>