实现瀑布流布局的俩种办法-百分百源码网

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

发布时间：09/01 来源：未知浏览：关键词：

瀑布流规划是一个此前挺火，此刻也比力常见的一种规划

这种看起来参差不齐的多栏规划，重点在于每个元素等宽不等高，一样图片网站利用较多

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

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>

整个瀑布流区域用一个 <div id="main"> 作为父容器

瀑布流中的每个数据块用 .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 = '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;
}

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

作为一个 CSS3 的新属性，只要 IE10 及以上的阅读器才支撑 column

信赖看了这些案例你已经把握了办法，更多出色请关注百分百源码网其它相关文章！