// css
@media only screen and (min-width: 400px) {
  .masonry {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
  }
}

@media only screen and (min-width: 700px) {
  .masonry {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
  }
}

@media only screen and (min-width: 900px) {
  .masonry {
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
  }
}

@media only screen and (min-width: 1100px) {
  .masonry {
    -moz-column-count: 5;
    -webkit-column-count: 5;
    column-count: 5;
  }
}

.masonry {
  margin: 1.5em 0;
  padding: 0;
  -moz-column-gap: 1.5em;
  -webkit-column-gap: 1.5em;
  column-gap: 1.5em;
  font-size: .85em;
}

.masonry .item {
  display: inline-block;
  background: #fff;
  margin: 0 0 1.5em;
  width: 100%;
}

// html
<div class="masonry">
   <div class="item"><img src="" alt="" /></div>
   <div class="item"><img src="" alt="" /></div>
   <div class="item"><img src="" alt="" /></div>
   ...
   <div class="item"><img src="" alt="" /></div>
</div>