<div id="wrp">
<div id="cols">
<div style="height: 265px; background: rgb(195, 51, 57);"></div>
<div style="height: 206px; background: rgb(62, 109, 134);"></div>
<div style="height: 240px; background: rgb(34, 23, 149);"></div>
<div style="height: 90px; background: rgb(59, 189, 254);"></div>
<div style="height: 272px; background: rgb(9, 105, 142);"></div>
<div style="height: 179px; background: rgb(254, 26, 63);"></div>
<div style="height: 178px; background: rgb(230, 55, 247);"></div>
<div style="height: 213px; background: rgb(38, 190, 4);"></div>
<div style="height: 168px; background: rgb(60, 36, 74);"></div>
<div style="height: 83px; background: rgb(156, 113, 29);"></div>
<div style="height: 174px; background: rgb(106, 191, 221);"></div>
<div style="height: 262px; background: rgb(204, 99, 60);"></div>
<div style="height: 136px; background: rgb(230, 89, 220);"></div>
</div>
</div>
#wrp{
width:600px;
height:450px;
background:#CCC;
overflow:auto;
}
#cols{
position:relative;
width:450px;
margin:5px auto;
-moz-column-width:150px;
-webkit-column-width:150px;
column-width:150px;
-moz-column-gap:0;
-webkit-column-gap:0;
column-gap:0;
}
#cols div{
width:120px;
min-height:80px;
margin:3px 5px;
background:#CCC;
display: inline-block;
padding: 0;
line-height:0;
border:solid 10px #FFF;
}
var rand = function(f,t){
return Math.floor((Math.random()*t)+f);
}
$('#cols div').each(function(){
$(this).css({
'height':rand(80,200)+'px',
'background':'rgb('+rand(0,255)+','+rand(0,255)+','+rand(0,255)+')'
});
});
This Pen doesn't use any external CSS resources.