console
<body>
<style>
.parent {
width:100%;
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
.child {
margin-bottom:20px;
-moz-page-break-inside: avoid;
-webkit-column-break-inside: avoid;
break-inside: avoid;
color:#fff;
}
.child:nth-of-type(1){ height:100px; background:#000; }
.child:nth-of-type(2){ height:120px; background:#111; }
.child:nth-of-type(3){ height:140px; background:#222; }
.child:nth-of-type(4){ height:160px; background:#333; }
.child:nth-of-type(5){ height:180px; background:#444; }
.child:nth-of-type(6){ height:200px; background:#555; }
.child:nth-of-type(7){ height:220px; background:#666; }
.child:nth-of-type(8){ height:240px; background:#777; }
.child:nth-of-type(9){ height:20px; background:#666; }
.child:nth-of-type(10){ height:220px; background:#666; }
.child:nth-of-type(11){ height:120px; background:#666; }
.child:nth-of-type(12){ height:220px; background:#666; }
</style>
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
<div class="child">10</div>
<div class="child">11</div>
<div class="child">12</div>
</div>
</body>