实现瀑布流布局的俩种方法(2)-木庄网络博客

JavaScript：

window.onload = function() {
  waterFall('main', 'box')
}
function waterFall(main, box) {  var main = document.getElementById(main);  var boxs = main.getElementsByClassName(box);  var boxWidth = boxs[0].offsetWidth; //获取每个数据块的宽度
  var mainWidh = main.offsetWidth; //获取主容器的宽度
  var cols = Math.floor(mainWidh / boxWidth); //计算列数
   
  var heightArr = []; //定义一个存放 top 值的数组
  for(var i = 0; i < boxs.length; i++) {    var boxHeight = boxs[i].offsetHeight;      if(i < cols) { //第一行        heightArr.push(boxs[i].offsetHeight);
        boxs[i].style.top = '0px'; 
        boxs[i].style.left = i * boxWidth +'px';
      } else {        //求出最矮盒子的高度
        var minBoxHeight = Math.min.apply(this, heightArr); 
        //求出最矮盒子的索引 
        var minBoxIndex = getIndex(minBoxHeight, heightArr); 
        boxs[i].style.top = minBoxHeight + 'px'; //顶部间距即最矮盒子的高度
        boxs[i].style.left = minBoxIndex * boxWidth +'px'; 
        //关键:更新最矮盒子的高度
        heightArr[minBoxIndex] += boxHeight;
      } 
  }
}
function getIndex(val, arr) {  for(var i in arr) {    if(val == arr[i]) {      return i;
    }
  }
}

这种方案一开始给 .box 设置了 position: absolute;

所以在打开页面的时候，如果页面性能较差，可能会出现所有数据块堆叠在一起的情况

可以将 .box 的 position: absolute 替换为 float: left，然后在 js 添加定位样式的时候，再补上 position: absolute，视觉上会有所改观

二、纯 CSS3 实现瀑布流

CSS3 中新增了一个属性 column，可以通过规定列数 column-count，让浏览器自适应布局

只需要删除上面的 JavaScript 部分，然后修改 #main 和 .box：

#main {
  width: 1280px;
  margin: 0 auto;
  -webkit-column-count: 5;
  column-count: 5;
  -webkit-column-gap: 0;
  column-gap: 0;
}.box {
  padding: 7px;
  box-sizing: border-box;
  width: 256px;
}