<div class="falls-1" id="falls_1">
  <div class="columns"></div>
  <div class="columns"></div>
  <div class="columns"></div>
  <div class="columns"></div>
</div>

.falls-1  {
  letter-spacing: -.35em;
}
/* 设置4列，每列占25%宽度 */
.falls-1 .columns {
  letter-spacing: normal;
  width: 25%;
  display: inline-block;
  vertical-align: top;
}
.falls-1 .columns div{
  background-color: orange;
  margin: 0 10px 10px;
  padding: 10px;
  font-size: 40px;
  color:white;
}

var listArray = [];
// 这里我们随机生成100个高度在50-400之间的数据
for (var i = 0; i < 100; i++) {
  listArray.push(parseInt(Math.random() * (400 - 50 + 1) + 50, 10));
}
var falls_1 = document.getElementById('falls_1');
var columns = falls_1.children;
// 循环数据数组
for(var x = 0; x<listArray.length; x++){
  var curColumns = columns[0];
  var item = document.createElement('div');
  item.style.height = listArray[x] + 'px';
  item.innerText = x;
  // 通过判断哪一列最低然后获取最低的列
  for(var y = 1; y<columns.length; y++){
    if(curColumns.clientHeight>columns[y].clientHeight){
      curColumns = columns[y];
    }
  }
  // 把元素添加的最低的列
  curColumns.appendChild(item);
}