var msnry = new Masonry('.masonry', {}); //Shows item order $('.item').each(function(index) { this.innerHTML = index; });
<div class="masonry"> <div class="item"></div> <div class="item w2"></div> <div class="item"></div> <div class="item h2"></div> <div class="item w2 h2"></div> <div class="item"></div> <div class="item h2"></div> <div class="item"></div> <div class="item w2 h2"></div> <div class="item"></div> <div class="item w2"></div> <div class="item h2"></div> <div class="item"></div> </div>
.masonry { background: #EEE; /* width: 600px; */ /* height: 300px; */ /* max-width: 600px; */ } /* clearfix */ .masonry:after { content: ''; display: block; clear: both; } .masonry .item { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float: left; width: 60px; height: 60px; background: #E77927; border: 2px solid #333; border-color: hsla(0, 0%, 0%, 0.5); border-radius: 5px; } .item.w2 { width: 120px; } .item.h2 { height: 120px; }