Need to stack inline-blocks (variable height) vertically

Question

I'm looking for a way (css or js) to make a bunch of blocks (random height) flow like this:

Meanwhile, the default behavior gives me this:

Any idea how to achieve this?

(Note that I'd like to keep the left-to-right order, and some kind of responsiveness)

Codepen: http://codepen.io/Trost/pen/ygMwJQ

.item{
  display: inline-block;
  background: grey;
  width: 100px;
  height: 100px; //height is variable
  margin: 5px;
}