Creating a Masonry Layout using CSS?

I want to create this layout using only CSS and not jquery or javascript. Is it possible and if so, please direct me to the right source. Thanks you :)

I tried my hand at this but it didn't come out well: http://ift.tt/1A1DgFp

HTML:

<div class="parent">

  <div class="red">
  </div>

  <div class="blue">
  </div>

  <div class="red">
  </div>

   <div class="red">
  </div>

</div>

CSS:

.parent{
  width:330px;
}

.red{
  float:left;
  width:150px;
  height:150px;
  margin-bottom:10px;
  margin-left:10px;
  background-color:red;
}

.blue{
  float:left;
  width:150px;
  height:300px;
  margin-bottom:10px;
  margin-left:10px;
  background-color:blue;
}