$( function() {
$('#container').masonry({
itemSelector: '.item',
columnWidth: 70
});
});
<div id="container">
<div class="item"></div>
<div class="item w2"></div>
<div class="item"></div>
<div class="item w2"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item w2 h2"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item w2"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item h2"></div>
</div>
body {
font-family: sans-serif;
}
#container {
border: 1px solid;
padding: 5px;
}
.item {
width: 60px;
height: 60px;
float: left;
margin: 5px;
background: #CCC;
}
.item.w2 {
width: 130px;
}
.item.h2 {
height: 130px;
}
External resources loaded into this fiddle: