Masonry - simple

by David Underwood

HTML

<script src="https://raw.github.com/desandro/masonry/v2.1.05/jquery.masonry.js"></script>
<div class="containter">
  <div class="boxcontainer">
    <div class="box4 commoninside"></div>
    <div class="box4 commoninside"></div>
    <div class="box4 commoninside"></div>
    <div class="box4 commoninside"></div>
  </div>
  <div class="box3 common"></div>
  <div class="box2 common"></div>
  <div class="box2 common"></div>
  <div class="box3 common"></div>
  <div class="box1 common"></div>
  <div class="box1 common"></div>
  <div class="box3 common"></div>
  <div class="box2 common"></div>
  <div class="box1 common"></div>
  <div class="box3 common"></div>
</div>

CSS

.containter {
	background-color: #CCC;
	max-width: 960px;
	overflow: hidden;
}
.common {
	display: block;
	margin: 10px;
	float: left;
	border: 1px solid #000;
}
.commoninside {
  display: block;
	margin: 10px;
	float: left;
	border: 1px solid #000;
}
/* 128 + 10 + 10 + 1 + 1 = 150 */
.box1 {
	background-color: #aC0;
	height: 138px;
	width: 138px;
}
.box4 {
	background-color: red;
	height: 138px;
	width: 138px;
  float: left;
}
/* 78 + 10 + 10 + 1 + 1 = 100 */
.box2 {
	background-color: #Fa0;
	height: 300px;
	width: 300px;
}
/* 178 + 10 + 10 + 1 + 1 = 200 */
.box3 {
	background-color: #0C0;
	height: 300px;
	width: 600px;
}
.boxcontainer {
  height: 320px;
	width: 320px;
  display: block;
  float: left;
}

JavaScript

$(document).ready(function() { 
  $('.containter').masonry({
    columnWidth: 150
  });
});