<div class="falls-2" id="falls_2"></div>

/*  这里我们通过inline-block来布局 */
.falls-2  {
  position: relative;
}
/* 这里我们给元素设置宽度为25%，也就是按照四列来设置 */
.falls-2 .item{
  width: 25%;
  position: absolute;
}
/* 为了计算方便我们把所有的间距都在内部的元素中设置，
这样一来我们就不用再计算定位的时候在去额外计算内外间距的距离了 */
.falls-2 .item-inner{
  position: absolute;
  background-color: orange;
  top: 0;
  bottom: 10px;
  right: 10px;
  left: 10px;
  padding: 10px;
  font-size: 40px;
  color:white;
}

// 随机生成100条数据
var listArray = [];
for (var i = 0; i < 100; i++) {
  listArray.push(parseInt(Math.random() * (400 - 80 + 1) + 80, 10));
}
// 这里表示列数
var colLength = 4;
var falls_1 = document.getElementById('falls_2');
var colArray = [];
// 通过父级的宽度和设置的列数来计算出每一项的宽度
var itemW = falls_1.clientWidth/colLength;
// 循环列数，初始化第一次元素的初始位置
for(var x = 0; x<colLength;x++){
  colArray.push({t: 0, l: x*itemW});
}
// 循环数据
for(var x = 0; x<listArray.length; x++){
  // 取第一个初始化数据
  var curPosition = colArray[0];
  // 然后通过循环判断哪一个数据最低
  for(var y = 1; y<colArray.length; y++){
    if(curPosition.t > colArray[y].t){
      curPosition = colArray[y];
    }
  }
  // 创建元素，并且给元素设置位置信息和宽高等信息
  var item = document.createElement('div');
  var itemInner = document.createElement('div');
  item.setAttribute('class','item');
  itemInner.setAttribute('class','item-inner');
  item.style.height = listArray[x] + 'px';
  item.style.top = curPosition.t + 'px';
  item.style.left = curPosition.l + 'px';
  item.style.width = itemW + 'px';
  itemInner.innerText = x;
  item.appendChild(itemInner);
  falls_1.appendChild(item);
  // 然后更新初始化中的数据，使下次循环时记录
  curPosition.t = curPosition.t + listArray[x];
}