实现瀑布流布局的俩种方法

瀑布流布局是一个之前挺火，现在也比较常见的一种布局

这种看起来参差不齐的多栏布局，重点在于每个元素等宽不等高，一般图片网站应用较多

随着页面滚动，数据块会在每列底部不断加载，理论上可以无限加载，且不会页面美观

Pinterest、花瓣网都是比较成熟的采用瀑布流布局的网站

效果图：

一、经典套路： JavaScript + 绝对定位

HTML 结构：

<div id="main">
  ...  <div class="box">
    <div class="wrapper">
      <div class="pic"><img src="" /></div>
      <div class="text">简单介绍</div>
    </div>
  </div>
  ...</div>

整个瀑布流区域用一个 835db59e8bcc1934cc580fe4102b1403 作为父容器

瀑布流中的每个数据块用 .box 作为基本布局， .wrapper 呈现样式和实际内容

CSS 样式：

* {margin: 0; padding: 0;}html, body {width: 100%; height: 100%; background-color: #EDEDED;}#main {
  position: relative;
  width: 1280px; /*限定父容器的宽度*/
  margin: 0 auto;
}.box {
  position: absolute;
  padding: 7px; /*不建议使用 margin*/
  box-sizing: border-box;
  width: 256px; /*限定数据块的宽度*/}.wrapper {
  padding: 5px;
  background-color: #fff;
  border: 1px solid #e4e4e4;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .2);
}.pic {
  font-size: 0; /*消除行内元素的间隙*/}.pic img {
  width: 100%;
  height: auto;
}.text {
  color: #999;
  background: #FAFAFA;
  font-size: 14px;
  padding-top: 5px;
}

在 .box 中设置了 padding 是为了留出视觉上的间距

之所以不使用 margin，是因为后面会使用 js 获取元素的 offsetWidth 和 offsetHeight

而这两个属性值是不计算 margin 的

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 = &#39;0px&#39;; 
        boxs[i].style.left = i * boxWidth +&#39;px&#39;;
      } else {        //求出最矮盒子的高度
        var minBoxHeight = Math.min.apply(this, heightArr); 
        //求出最矮盒子的索引 
        var minBoxIndex = getIndex(minBoxHeight, heightArr); 
        boxs[i].style.top = minBoxHeight + &#39;px&#39;; //顶部间距即最矮盒子的高度
        boxs[i].style.left = minBoxIndex * boxWidth +&#39;px&#39;; 
        //关键:更新最矮盒子的高度
        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;
}

但通过这种方式实现的瀑布流，实际上是按照纵向排列的，而之前的经典方案是按照横向排列的

作为一个 CSS3 的新属性，只有 IE10 及以上的浏览器才支持 column

相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

相关阅读：

怎样定义内联元素span的最小高度

html area图片热点如何使用

iframe的去边框和无边框有哪些操作方式

怎样用image来提交form

Atas ialah kandungan terperinci 实现瀑布流布局的俩种方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!