Masonry bricks

by Eddie Lin

HTML

<script src="http://masonry.desandro.com/masonry.pkgd.min.js"></script>
<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>

CSS

.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; }

JavaScript

var msnry = new Masonry('.masonry', {});

//Shows item order
$('.item').each(function(index) {
    this.innerHTML = index;
});