帕吉小馆

瀑布流布局

2018/5/10 htmlCSSJavascript

瀑布流布局

在知乎看到大佬说，学习前端的第一阶段要会一些js基本的特效，学习一下，做几个Demo来看看

好像有那么两种方法： 1、通过css来搞定瀑布流 2、通过js来控制

# CSS方法解决瀑布流

因为css3有了一个新的属性:column 我们在图片或者需要瀑布流的模块的父元素设置column属性就可以达到这种瀑布流的效果。

#main{
    /*定位*/
    /*position: relative;*/
    /*多栏布局 设置栏宽度*/
    -webkit-column-width:202px;
    -moz-column-width:202px;
    column-width:202px;
}

# JS方法来解决瀑布流布局

首先先把html写出来：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>瀑布流布局</title>
</head>
<body>
  <div id="main">
    <div class="wrap">
      <div class="img">
        <img src="http://img4.imgtn.bdimg.com/it/u=3673652172,785167112&fm=27&gp=0.jpg">
      </div>
    </div>
    <div class="wrap">
      <div class="img">
        <img src="http://img1.imgtn.bdimg.com/it/u=2752884811,3342547378&fm=27&gp=0.jpg">
      </div>
    </div>
    <div class="wrap">
      <div class="img">
        <img src="http://img5.imgtn.bdimg.com/it/u=2573504723,2456120500&fm=27&gp=0.jpg">
      </div>
    </div>
    <div class="wrap">
      <div class="img">
        <img src="http://img0.imgtn.bdimg.com/it/u=3214770734,3861052448&fm=27&gp=0.jpg">
      </div>
    </div>
    <div class="wrap">
      <div class="img">
        <img src="http://img4.imgtn.bdimg.com/it/u=3407532446,2830180038&fm=27&gp=0.jpg">
      </div>
    </div>
    <div class="wrap">
      <div class="img">
        <img src="http://img0.imgtn.bdimg.com/it/u=30302420,912099376&fm=27&gp=0.jpg">
      </div>
    </div>
    <div class="wrap">
      <div class="img">
        <img src="http://img5.imgtn.bdimg.com/it/u=2347360460,2805552283&fm=27&gp=0.jpg">
      </div>
    </div>
  </div>
</body>
</html>

在html里写了很多的图片（这里没有写出来，也可以从后台拉取数据） 然后对图片做一些样式的调整：

<style>
    * {
      padding: 0px;
      margin: 0px;
    }
    #main {
      position: relative;
    }
    .wrap {
      padding: 15px 0px 0px 15px;
      float: left;
    }
    .img {
      padding: 10px;
      border-radius: 5px;
      border: 1px solid #ccc;
      box-shadow: 0 0 5px #ccc;
    }
    .img img {
      width: 240px;
      height: auto;
    }
  </style>

对图片做一些操作，宽度确定，高度auto; 然后开始用js对这些图片做一些处理

<script>
    window.onload = function () {
      waterFull('main', 'wrap');
    }

    function waterFull(parent, children) {
      var oParent = document.getElementById(parent);
      var oWraps = getByClass(oParent, children);
      //计算整个页面显示的列数
      var oWrapWeight = oWraps[0].offsetWidth;
      var cols = Math.floor(document.documentElement.clientWidth / oWrapWeight);
      //设置main的宽度，并且居中
      oParent.style.cssText = 'width:' + oWrapWeight * cols + 'px; margin: 0 auto';
      //找出高度最小的图片，将下一个图片放在下面
      //定义一个数组，存放每一列的高度，初始化存的是第一行的所有列的高度
      var arrHeight = [];
      for (var i = 0; i < oWraps.length; i++) {
        if (i < cols) {
          arrHeight.push(oWraps[i].offsetHeight);
        }else {
          var minHeight = Math.min.apply(null, arrHeight);
          var minIndex = getMinhIndex(arrHeight, minHeight);
          oWraps[i].style.position = 'absolute';
          oWraps[i].style.top = minHeight + 'px';
          oWraps[i].style.left = minIndex * oWrapWeight + 'px';
          arrHeight[minIndex] += oWraps[i].offsetHeight;
        }
      }
    }
    function getByClass(parent, className) {
      var boxArr = new Array();//用来获取所有class为box的元素
      oElement = parent.getElementsByTagName('*');
      for (var i = 0; i < oElement.length; i++) {
        if (oElement[i].className == className) {
          boxArr.push(oElement[i]);
        }
      };
      return boxArr;
    }
    //获取当前最小值得下标
    function getMinhIndex(array, min) {
      for (var i in array) {
        if (array[i] == min)
          return i;
      }
    }
  </script>

搞定～