QuoJS Masonry example

mason.css

body{
	margin: 2em auto;
}

.box{
	background: whitesmoke;
	margin-bottom: 10px;
}

.mason{
	width: 960px;
	margin: 0 auto;
}

.mason .col{
	float: left;
	margin: 0 5px;
	width: 230px;
}

mason.html

<div id="container" class="cols">
	<div class="box" style="height:320px">1</div>
	<div class="box" style="height:400px">2</div>
	<div class="box" style="height:280px">3</div>
	<div class="box" style="height:420px">4</div>
	<div class="box" style="height:500px">5</div>
	<div class="box" style="height:350px">6</div>
	<div class="box" style="height:380px">7</div>
	<div class="box" style="height:480px">8</div>
	<div class="box" style="height:332px">9</div>
	<div class="box" style="height:420px">10</div>
	<div class="box" style="height:320px">11</div>
	<div class="box" style="height:420px">12</div>
</div>

script.html

<script src="quo.js"></script>
<script src="quo.masonry.js"></script>
<script>
	$$().ready(function(){
		$$("#container").masonry();
	})
</script>