<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)+')'
  });
  
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js