深入探秘jquery瀑布流的實(shí)現(xiàn)

更新時(shí)間：2016年01月30日 09:47:25 投稿：hebedich

瀑布流就是像瀑布一樣的網(wǎng)站——豐富的網(wǎng)站內(nèi)容，特別是絢美的圖片會(huì)讓你流連忘返。你在瀏覽網(wǎng)站的時(shí)候只需要輕輕滑動(dòng)一下鼠標(biāo)滾輪，一切的美妙的圖片精彩便可呈現(xiàn)在你面前。瀑布流網(wǎng)站是新興的一種網(wǎng)站模式——她的典型代表是pinterest、美麗說(shuō)、蘑菇街這類型的網(wǎng)站。

瀑布流也應(yīng)該算是流行幾年了吧。首先是由Pinterest掀起的浪潮，然后國(guó)內(nèi)設(shè)計(jì)如雨后春筍般，冒出很多瀑布流的例子，比如，蘑菇街，Mark之(不過(guò)最近涉黃，好像被喝茶了),還有淘寶的 “哇哦”. 這些都是很棒的例子，今天我想重新談起瀑布流，一是想滿足我自己的愿望，寫一個(gè)詳細(xì)的介紹(不敢自名為教程),二是，給大家一份參考，因?yàn)閟earch很多，但是他們給的是一個(gè)插件，然后教你怎樣配置，當(dāng)然，也有很多其他的大神也細(xì)心的做了很多教程，比如 imooc上面 Amy 姐姐發(fā)布的瀑布流教程，也是很棒的。而我的目的就是，盡量把一些常見的demo給大家講解一遍，以及，融合以前學(xué)過(guò)的設(shè)計(jì)模式，相當(dāng)于一個(gè)簡(jiǎn)單的demo.

絕對(duì)式布局

不多說(shuō)，先看一個(gè)demo

var cal = (function() {
  "use strict";
  var $ = function() {
    return document.querySelectorAll.apply(document, arguments);
  }
  var arrHeight = []; //得到分列的高度
  var columns = function() { //計(jì)算頁(yè)面最多可以放多少列
    var bodyW = document.body.clientWidth,
      pinW = $(".pin")[0].offsetWidth;
    return Math.floor(bodyW / pinW);
  }
  var getIndex = function(arr) { //獲得最小高度的index
      var minHeight = Math.min.apply(null, arr); //獲得最小高度
      for (var i in arr) {
        if (arr[i] === minHeight) {
          return i;
        }
      }
    }
    //根據(jù)列數(shù)確定第一排img的高度并放入數(shù)組當(dāng)中。
  var setWidth = function() { //通過(guò)列數(shù)設(shè)置寬度
    var col = columns(), //獲得最后一列
      main = $('#main')[0]; //獲得罩層
    main.style.width = col * $('.pin')[0].offsetWidth + "px";
  }
  var overLoad = function(ele) {
    var index = getIndex(arrHeight),
      minHeight = Math.min.apply(null, arrHeight), //獲取最小高度
      pins = $('.pin'),
      style = ele.style;
    style.position = "absolute";
    style.top = minHeight + "px"; //設(shè)置當(dāng)前元素的高度
    style.left = pins[index].offsetLeft + "px";
    arrHeight[index] += ele.offsetHeight;
  }
  var init = function() {
    var pins = $(".pin"),
      col = columns();
    setWidth(); //設(shè)置包裹容器的寬度
    for (var i = 0, pin; pin = pins[i]; i++) {
      if (i < col) { //存儲(chǔ)第一排的高度
        arrHeight.push(pin.offsetHeight);
      } else {
        overLoad(pin); //將元素的位置重排
      }
    }
  }
  window.onload = init;
  //...執(zhí)行自動(dòng)更新操作。
  //添加當(dāng)，滾動(dòng)到一定位置的時(shí)候，添加html節(jié)點(diǎn).
  //得到最低高度和序號(hào),獲得臨界位置
  //模仿加載數(shù)據(jù)
  var dataInt = [{
    'src': '1.jpg'
  }, {
    'src': '2.jpg'
  }, {
    'src': '3.jpg'
  }, {
    'src': '4.jpg'
  }, {
    'src': '1.jpg'
  }, {
    'src': '2.jpg'
  }, {
    'src': '3.jpg'
  }, {
    'src': '4.jpg'
  }];

  function isLoad() { //是否可以進(jìn)行加載
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
      wholeHeight = document.documentElement.clientHeight || document.body.clientHeight,
      point = scrollTop + wholeHeight; //頁(yè)面底部距離header的距離
    var arr = $('.pin');
    var lastHei = arr[arr.length - 1].getBoundingClientRect().top;
    return (lastHei < point) ? true : false;
  }
  var dealScroll = (function() {
    var main = $('#main')[0],
      flag = true;
    return function() {
      console.log("trigger");
      if (isLoad() && flag) {
        for (var i = 0, data; data = dataInt[i++];) {
          var div = document.createElement('div');
          div.innerHTML = temp(data.src);
          div.className = "pin";
          main.appendChild(div);
          overLoad(div); //和上面的overload有耦合性質(zhì)
        }
        flag = false;
        setTimeout(function() { //控制滑行手速，時(shí)間越長(zhǎng)對(duì)速度的滑動(dòng)時(shí)間影響越大。
          flag = true;
        }, 1000);
      }
    }
  })();
  window.addEventListener('scroll', function() {
    dealScroll();
  }, false);

  function temp(src) {
    return `
    <div class="box">
      <img src="http://cued.xunlei.com/demos/publ/img/P_00${src}"/>
    </div>
  `;
  }

})();

CSS

$font:10px/1.5 sans-serif,"Microsoft YaHei","Arial";
html{
 height: 100%;
 width: 100%;
 font:$font;
}
  #main{
    position: relative;
    &::after{
     display:block;
     content:'';
     clear:both;
    }
  }
  .pin{
    padding: 15px 0 0 15px;
    float:left;
  }
  .box{
    padding: 10px;
    border:1px solid #ccc;
    box-shadow: 0 0 6px #ccc;
    border-radius: 5px;
  }
  .box img{
    width:162px;
    height:auto;
  }

HTML

<div id="main">
    <div class="pin">
      <div class="box">
        <img src="http://cued.xunlei.com/demos/publ/img/P_001.jpg" />
      </div>
    </div>
    <div class="pin">
      <div class="box">
        <img src="http://cued.xunlei.com/demos/publ/img/P_002.jpg" />
      </div>
    </div>
    <div class="pin">
      <div class="box">
        <img src="http://cued.xunlei.com/demos/publ/img/P_003.jpg" />
      </div>
    </div>
    <div class="pin">
      <div class="box">
        <img src="http://cued.xunlei.com/demos/publ/img/P_004.jpg" />
      </div>
    </div>
    <div class="pin">
      <div class="box">
        <img src="http://cued.xunlei.com/demos/publ/img/P_005.jpg" />
      </div>
    </div>
    <div class="pin">
      <div class="box">
        <img src="http://cued.xunlei.com/demos/publ/img/P_006.jpg" />
      </div>
    </div>
    <div class="pin">
      <div class="box">
        <img src="http://cued.xunlei.com/demos/publ/img/P_007.jpg" />
      </div>
    </div>
    <div class="pin">
      <div class="box">
        <img src="http://cued.xunlei.com/demos/publ/img/P_008.jpg" />
      </div>
    </div>
    <div class="pin">
      <div class="box">
        <img src="http://cued.xunlei.com/demos/publ/img/P_009.jpg" />
      </div>
    </div>
    <div class="pin">
      <div class="box">
        <img src="http://cued.xunlei.com/demos/publ/img/P_010.jpg" />
      </div>
    </div>
    <div class="pin">
      <div class="box">
        <img src="http://cued.xunlei.com/demos/publ/img/P_011.jpg" />
      </div>
    </div>
    <div class="pin">
      <div class="box">
        <img src="http://cued.xunlei.com/demos/publ/img/P_012.jpg" />
      </div>
    </div>
    <div class="pin">
      <div class="box">
        <img src="http://cued.xunlei.com/demos/publ/img/P_013.jpg" />
      </div>
    </div>
    <div class="pin">
      <div class="box">
        <img src="http://cued.xunlei.com/demos/publ/img/P_014.jpg" />
      </div>
    </div>
    <div class="pin">
      <div class="box">
        <img src="http://cued.xunlei.com/demos/publ/img/P_015.jpg" />
      </div>
    </div>
    <div class="pin">
      <div class="box">
        <img src="http://cued.xunlei.com/demos/publ/img/P_016.jpg" />
      </div>
    </div>
    <div class="pin">
      <div class="box">
        <img src="http://cued.xunlei.com/demos/publ/img/P_017.jpg" />
      </div>
    </div>
    <div class="pin">
      <div class="box">
        <img src="http://cued.xunlei.com/demos/publ/img/P_018.jpg" />
      </div>
    </div>
    <div class="pin">
      <div class="box">
        <img src="http://cued.xunlei.com/demos/publ/img/P_019.jpg" />
      </div>
    </div>
    <div class="pin">
      <div class="box">
        <img src="http://cued.xunlei.com/demos/publ/img/P_020.jpg" />
      </div>
    </div>
    <div class="pin">
      <div class="box">
        <img src="http://cued.xunlei.com/demos/publ/img/P_021.jpg" />
      </div>
    </div>
  </div>
  <script type="text/javascript" src="./dist/index.entry.js"></script>

這個(gè)應(yīng)該算是最常用的一個(gè)布局，但是他耗費(fèi)的性能較高。不過(guò)，通過(guò)一些重構(gòu)設(shè)計(jì)，這些都是可以避免的，我們?cè)敿?xì)了解一下。
關(guān)于html和css，大家可以查看一下控制臺(tái)，或者直接copy一份都是可以的。

 <div class="pin">
      <div class="box">
        <img src="http://cued.xunlei.com/demos/publ/img/P_001.jpg" />
      </div>
    </div>

這是main 容器框內(nèi)部的一個(gè)pin框，也是最基本的布局單元。(這里，要感謝迅雷UED提供的圖片) 而我們的頁(yè)面其實(shí)也是由pin單元拼接起來(lái)，在內(nèi)部設(shè)置padding，形成間隔的效果。

這里就不詳細(xì)展開了。
接下來(lái)我們看一下js原理。

JS實(shí)現(xiàn)原理

其實(shí)瀑布式主要的難點(diǎn)就在于，如果將圖片整齊的排列在對(duì)應(yīng)的列下，以及什么時(shí)候開始刷新加載圖片。
而圖片整齊的排列的主要邏輯和算法即，先獲取容器內(nèi)可以放多少列，然后，通過(guò)計(jì)算，存放第一列的高度，再遍歷剩下(除第一列的元素)的高度，分別放入，高度最小的那一列。逐個(gè)添加，最后結(jié)束遍歷。
開始刷新的設(shè)置就很簡(jiǎn)單了，瀑布流刷新只和一個(gè)事件有關(guān)，即，window.onscroll. 主要的算法即，當(dāng)頁(yè)面滑動(dòng)到最低高度的時(shí)候開始加載節(jié)點(diǎn)并且添加，當(dāng)然，節(jié)點(diǎn)添加的個(gè)數(shù)是不固定的。
先上代碼吧，我這里分3部分講解，一個(gè)是圖片的排列，一個(gè)是設(shè)置加載的位置.另外再補(bǔ)充一個(gè)響應(yīng)式加載。

圖片排列

var $ = function() {
    return document.querySelectorAll.apply(document, arguments);
  }
  var arrHeight = []; //得到分列的高度
  var columns = function() { //計(jì)算頁(yè)面最多可以放多少列
    var containerW = $("#main")[0].clientWidth,
      pinW = $(".pin")[0].offsetWidth;
    return Math.floor(containerW / pinW);
  }
  var getIndex = function(arr) { //獲得最小高度的index
      var minHeight = Math.min.apply(null, arr); //獲得最小高度
      for (var i in arr) {
        if (arr[i] === minHeight) {
          return i;
        }
      }
    }
    //根據(jù)列數(shù)確定第一排img的高度并放入數(shù)組當(dāng)中。
  var setCenter = (function() { //通過(guò)列數(shù)設(shè)置寬度
    var main = $('#main')[0]; //獲得罩層
    var getPadding = function() { //設(shè)置padding
      var col = columns(); //獲得最后一列
      var padding = main.clientWidth - col * $('.pin')[0].offsetWidth;
      return padding / 2;
    }
    var getComputedStyle = function(ele) { //兼容IE的支持情況
      if (window.getComputedStyle) {
        return window.getComputedStyle(ele);
      } else {
        return ele.currentStyle;
      }
    }
    var getPinPad = function() { //獲得pin的padding值
      var pin = $(".pin")[0];
      return parseInt(getComputedStyle(pin).paddingLeft);
    }
    return function() { //設(shè)置寬度
      main.style.padding = `0 ${getPadding()}px 0 ${getPadding()-getPinPad()}px`;
    }
  })();
  var overLoad = function(ele) {
    var index = getIndex(arrHeight),
      minHeight = Math.min.apply(null, arrHeight), //獲取最小高度
      pins = $('.pin'),
      style = ele.style;
    style.position = "absolute";
    style.top = minHeight + "px"; //設(shè)置當(dāng)前元素的高度
    style.left = pins[index].offsetLeft + "px";
    arrHeight[index] += ele.offsetHeight;
  }
  //初始化時(shí)執(zhí)行函數(shù)
  var init = function() {
      var pins = $(".pin"),
        col = columns();
      setCenter(); //設(shè)置包裹容器的寬度
      for (var i = 0, pin; pin = pins[i]; i++) {
        if (i < col) { //存儲(chǔ)第一排的高度
          arrHeight.push(pin.offsetHeight);
        } else {
          overLoad(pin); //將元素的位置重排
        }
      }
    }

里面一共有7個(gè)函數(shù)(大函數(shù)),一個(gè)變量。說(shuō)一下思路吧。首先，頁(yè)面onload之后執(zhí)行的函數(shù)是 init. 要知道，一個(gè)js程序一定有他的入口，關(guān)鍵看你怎么找了。然后我們深入init函數(shù)體，觀察。init里面執(zhí)行的業(yè)務(wù)邏輯就是存儲(chǔ)第一排元素的高度，然后重排剩下的元素。通過(guò)columns函數(shù)來(lái)獲得當(dāng)前窗口最多可以放下多少列，然后設(shè)置容器的居中(通過(guò)padding設(shè)置即可). 接下來(lái)，遍歷pin的單元框，將第一排的元素高度存放在arrHeight數(shù)組里，將剩下的元素進(jìn)行重排。其他的函數(shù)覺得沒什么講解的必要了。我們著重來(lái)看一下overLoad函數(shù).

overLoad

var overLoad = function(ele) {
    var index = getIndex(arrHeight),
      minHeight = Math.min.apply(null, arrHeight), //獲取最小高度
      pins = $('.pin'),
      style = ele.style;
    style.position = "absolute";
    style.top = minHeight + "px"; //設(shè)置當(dāng)前元素的高度
    style.left = pins[index].offsetLeft + "px";
    arrHeight[index] += ele.offsetHeight;
  }

在overLoad里面有g(shù)etIndex函數(shù)，獲取最小高度的index,然后就可以設(shè)置傳入進(jìn)來(lái)的ele元素的位置(絕對(duì)定位), top為數(shù)組中最小高度的px值，left就為第一排制定的Index元素的左邊距位置。最后更新一下高度，ok!!! that's enough.
設(shè)置加載位置

var dataInt = [{
    'src': '1.jpg'
  }, {
    'src': '2.jpg'
  }, {
    'src': '3.jpg'
  }, {
    'src': '4.jpg'
  }, {
    'src': '1.jpg'
  }, {
    'src': '2.jpg'
  }, {
    'src': '3.jpg'
  }, {
    'src': '4.jpg'
  }];

  function isLoad() { //是否可以進(jìn)行加載
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
      wholeHeight = document.documentElement.clientHeight || document.body.clientHeight,
      point = scrollTop + wholeHeight; //頁(yè)面底部距離header的距離
    var arr = $('.pin');
    var lastHei = arr[arr.length - 1].getBoundingClientRect().top;
    return (lastHei < point) ? true : false;
  }
  //處理滑動(dòng)
  var dealScroll = (function() {
    var main = $('#main')[0],
      flag = true;
    return function() {
      if (isLoad() && flag) {
        for (var i = 0, data; data = dataInt[i++];) {
          var div = document.createElement('div');
          div.innerHTML = temp(data.src);
          div.className = "pin";
          main.appendChild(div);
          overLoad(div); //和上面的overload有耦合性質(zhì)
        }
        flag = false;
        setTimeout(function() { //控制滑行手速，時(shí)間越長(zhǎng)對(duì)速度的滑動(dòng)時(shí)間影響越大。
          flag = true;
        }, 200);
      }
    }
  })();

  function temp(src) {
    return `
    <div class="box">
      <img src="http://cued.xunlei.com/demos/publ/img/P_00${src}"/>
    </div>
  `;
  }

其實(shí)，精華就在上一部分，這個(gè)只是作為一個(gè)加載數(shù)據(jù)的手段，當(dāng)然，你可以點(diǎn)擊加載(手動(dòng)觸發(fā))，或者其他的加載方法。當(dāng)然，怎么設(shè)置完全是取決于你的。所以，隨大流，依然是通過(guò)下滑滾動(dòng)加載。繼續(xù)，找入口函數(shù)->dealScroll. 該函數(shù)執(zhí)行的任務(wù)就是，通過(guò)isload函數(shù),判斷是否可以進(jìn)行加載判斷。我們看一下isload函數(shù)，這個(gè)就是滾動(dòng)加載的關(guān)鍵點(diǎn).

 function isLoad() { //是否可以進(jìn)行加載
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
      wholeHeight = document.documentElement.clientHeight || document.body.clientHeight,
      point = scrollTop + wholeHeight; //頁(yè)面底部距離header的距離
    var arr = $('.pin');
    var lastHei = arr[arr.length - 1].getBoundingClientRect().top;
    return (lastHei < point) ? true : false;
  }

通過(guò)計(jì)算得出，頁(yè)面底部距視口的位置(工具條下部) 與最后一個(gè)元素的絕對(duì)位置比較，如果滑動(dòng)距離超過(guò)，則啟用加載。
yeah~ That's over.
back to dealScroll

接下來(lái)就是看加載的部分了，這個(gè)部分其實(shí)也沒什么說(shuō)的，就是創(chuàng)建一個(gè)div節(jié)點(diǎn)，然后將他放到容器的最后，并且通過(guò)overLoad函數(shù)來(lái)處理該節(jié)點(diǎn)的位置。另外在該函數(shù)的末尾，我設(shè)置了一個(gè)控制滑動(dòng)速度的trick,通過(guò)對(duì)函數(shù)的節(jié)流，防止有時(shí)候，請(qǐng)求過(guò)慢，用戶重復(fù)發(fā)送請(qǐng)求，造成資源浪費(fèi)。
然后，這一部分也可以告一段落了。

響應(yīng)式

最后一部分就是響應(yīng)式了，這部分，也超級(jí)簡(jiǎn)單，只要你封裝性做的好，其實(shí)這一部分就是添加一個(gè)resize事件就over了。我們繼續(xù)找入口函數(shù)。

  var resize = (function() {
      var flag;
      return function(fn) {
        clearTimeout(flag);
        flag = setTimeout(function() { //函數(shù)的節(jié)流,防止用戶過(guò)度移動(dòng)
          fn();
          console.log("ok")
        }, 500);
      }
})();

同樣，這里使用到了函數(shù)節(jié)流的思想，要知道，作為一個(gè)程序員，永遠(yuǎn)不要以為用戶干不出什么傻事. 比如，沒事的時(shí)候拖著瀏覽器窗口玩，放大，縮小，再放大... 其實(shí)，這事我經(jīng)常干，因?yàn)闆]有女朋友，寫代碼寫累了，就拖瀏覽器玩。所以，考慮到我們單身狗的需求，使用函數(shù)節(jié)流是非常有必要的。感興趣的童鞋，可以參考我前面的文章，進(jìn)行學(xué)習(xí)。說(shuō)明一下，這里的回調(diào)函數(shù)指的就是init函數(shù)，但是需要對(duì)init做些改動(dòng)。詳見。

 var update = function(ele) { //當(dāng)resize的時(shí)候，重新設(shè)置
    ele.style.position = "initial";
  }
  //初始化時(shí)執(zhí)行函數(shù)
  var init = function() {
      var pins = $(".pin"),
        col = columns();
      arrHeight = []; //清空高度
      setCenter(); //設(shè)置包裹容器的寬度
      for (var i = 0, pin; pin = pins[i]; i++) {
        if (i < col) { //存儲(chǔ)第一排的高度
          arrHeight.push(pin.offsetHeight);
          update(pin);
        } else {
          overLoad(pin); //將元素的位置重排
        }
      }
    }

上面需要加入update,對(duì)新的第一排元素進(jìn)行更新。
然后就可以直接搬過(guò)來(lái)使用即可。
這就是絕對(duì)是布局的大部分內(nèi)容了。

總結(jié)一下吧，這個(gè)部分我應(yīng)該是，重構(gòu)Amy的例子的，總的來(lái)說(shuō)是遵循了，最少知識(shí)原則的，一個(gè)函數(shù)盡量不帶參數(shù)，就一定不帶參數(shù)了. 還有就是一個(gè)函數(shù) 的書寫，不超過(guò)33行，并且盡量的實(shí)現(xiàn)細(xì)粒度表達(dá)，實(shí)現(xiàn)函數(shù)的重用。當(dāng)然，我寫的這一部分還是有很多問(wèn)題的，js組織結(jié)構(gòu)還是比較混論的，一些hack直接與主要業(yè)務(wù)邏輯放在一起。我也相信，讀者們肯定有自己獨(dú)特的見解，寫出來(lái)的代碼，肯定比我好太多!!! (這個(gè)是肯定的.)

列式布局

同樣，先看demo.
https://jsfiddle.net/jimmyTHR/amyvoagm/5/

我們對(duì)比一下上面的，絕對(duì)式布局。一個(gè)很大的卻別就是，頁(yè)面的計(jì)算量大大降低。什么意思呢？即，頁(yè)面重繪的次數(shù)減少，操作節(jié)點(diǎn)數(shù)減少，頁(yè)面布局更加清晰。

首先我們來(lái)看一下他的html內(nèi)容。我這里就不貼出全部了，同樣，只列出一個(gè)基本單元。

<div id="container">
    <span class="column">
    <span class="panel">
          <img src="http://cued.xunlei.com/demos/publ/img/P_009.jpg" alt="">
          <p></p>
        </span>
      </span>
      </div>

上面就是一個(gè)基本的單元，需要注意的是，我們需要設(shè)置一個(gè)column表示一列。而span.panel就是一個(gè)基本磚塊。
好了，不在這地方磨嘰了。我們?cè)賮?lái)看一下scss.

$font:10px/1.5 sans-serif,"Microsoft YaHei","Arial";
html,body{
  height: 100%;
  width: 100%;
  font:$font;
  background-color: #eee;
}
#container{
  width:100%;
  height: 100%;
  position: relative;
  text-align: center;
}
.column{
  display: inline-block;
  width:210px;
  vertical-align: top;
  padding:0 10px;
  .panel{
    padding: 10px 0 10px 0;
    display: block;
    text-align: center;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    background-color: #fff;
    text-decoration: none;
  }
}

這我也不磨嘰了，scss這里需要引入normalize.scss進(jìn)行和諧處理。
html和css介紹完了，我們要開始搬磚了。

JS原理

上面說(shuō)了，列式布局簡(jiǎn)直算是完虐絕對(duì)式布局. 絕對(duì)式布局，簡(jiǎn)直就像10元/天的搬磚工。而列式布局就是站在那看他搬磚的監(jiān)工。同樣都是搬磚的，一個(gè)賣苦力，一個(gè)秀智商。簡(jiǎn)直了?。?！
聽了逼逼，我們來(lái)直面一下慘淡的人生。

列式布局的原理其實(shí)和絕對(duì)式布局沒有太大的卻別。
同樣也有3個(gè)部分，一是頁(yè)面加載自適應(yīng)，二是滑動(dòng)加載，三是響應(yīng)式布局。
分別講解:

加載自適應(yīng)

我們先看一下代碼吧:

var $ = function() { //一個(gè)hacks
  return document.querySelectorAll.apply(document, arguments);
}
var waterFall = (function(){
  //初始化布局
  var arrHeight = []; //列的高度
  var columns = function() { //計(jì)算頁(yè)面最多可以放多少列
      var bodyW = $('#container')[0].clientWidth,
        pinW = $(".column")[0].offsetWidth;
      return Math.floor(bodyW / pinW);
    }
    //設(shè)置瀑布流居中
  var getHtml = function() {
      var cols = $('.column'), //獲得已有的列數(shù)
        arrHtml = [];
      for (var i = 0, col; col = cols[i++];) {
        var htmls = col.innerHTML.match(/<img(?:.|\n|\r|\s)*?p>/gi); //獲取一個(gè)columns的
        arrHtml = arrHtml.concat(htmls);
      }
      return arrHtml;
    }
    //獲得數(shù)組中最低的高度
  var getMinIndex = function() { //獲得最小高度的index
    var minHeight = Math.min.apply(null, arrHeight); //獲得最小高度
    for (var i in arrHeight) {
      if (arrHeight[i] === minHeight) {
        return i;
      }
    }
  }
  var createCol = function() {
      var cols = columns(), //獲得列數(shù)
        contain = $("#container")[0];
      contain.innerHTML = ''; //清空數(shù)據(jù)
      for (var i = 0; i < cols; i++) {
        var span = document.createElement("span");
        span.className = "column";
        contain.appendChild(span);
      }
    }
    //初始化列的高度
  var initHeight = function() {
      var cols = columns(),
        arr = [];
      for (var i = 0; i < cols; i++) {
        arr.push(0);
      }
      arrHeight = arr;
    }
   //創(chuàng)建一個(gè)ele并且添加到最小位置
  var createArticle = function(html){
    var cols = $('.column'),
      index = getMinIndex(),
      ele = document.createElement('article');
    ele.className = "panel";;
    ele.innerHTML = html;
    cols[index].appendChild(ele);
    arrHeight[index] += ele.clientHeight;
  }
  //遍歷獲得的html然后添加到頁(yè)面中
  var reloadImg = function(htmls) {
    for (var i = 0, html, index; html = htmls[i++];) {
      createArticle(html);
    }

  }
  var onload = function() {
      var contain = $("#container")[0], //獲得容器
        arrHtml = getHtml(); //獲得現(xiàn)有的所有瀑布流塊
      //創(chuàng)建列，然后進(jìn)行加載
      createCol();
      //初始化arrHeight
      initHeight();
      //進(jìn)行頁(yè)面的重繪
      reloadImg(arrHtml);
      return this;
    }
})();

看見一個(gè)程序，先找他的入口函數(shù)，顯然，一開始應(yīng)該是onload，那么，觀察onload函數(shù). 可以發(fā)現(xiàn)，里面一共有4個(gè)函數(shù).
由于用戶的寬度不確定，所以我們的列數(shù)也不是一定的。這時(shí)候，就需要獲取實(shí)際尺寸然后進(jìn)行一個(gè)計(jì)算才行。然后需要對(duì)原有的數(shù)據(jù)，進(jìn)行重排。

所以，getHtml就是來(lái)獲取一開始的原有數(shù)據(jù)(innerHTML);
然后就可以更具寬度來(lái)添加列了。
createCol函數(shù)就是更具寬度來(lái)添加列的。
這時(shí)候，我們需要一個(gè)數(shù)組(arrHeight)來(lái)保存每列的高(默認(rèn)都為0).
然后就可以進(jìn)行頁(yè)面重排=>reloadImg(arrHtml), arrHtml就是原始數(shù)據(jù)。
好，我們這里初級(jí)搬磚完成。
接下來(lái)，是要開始加固了。

滑動(dòng)加載

這個(gè)應(yīng)該算是我直接copy過(guò)來(lái)的，所以說(shuō)，函數(shù)寫的好，重用性也是棒棒噠。

show u code
 var isLoad=function() { //是否可以進(jìn)行加載
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
      wholeHeight = document.documentElement.clientHeight || document.body.clientHeight,
      point = scrollTop + wholeHeight; //頁(yè)面底部距離header的距離
    var lastHei = Math.min.apply(null,arrHeight);
    return (lastHei < point) ? true : false;
  }

  var dealScroll = (function(){
    window.onscroll = ()=>{dealScroll();}
    var container = $('#container')[0];
    return function(){
      if(isLoad()){
        for(var i = 0,html,data;data = dataInt[i++]; ){
          html = tpl.temp(data.src); //獲得數(shù)據(jù)然后添加模板
          createArticle(html);
        }
      }
      return this;
    }
  })();

同樣的isload，同樣的dealScroll的邏輯。這里需要說(shuō)明的就是，createArticle就是給最低高度列添加磚塊的函數(shù)。
然后，就沒有然后啦.

響應(yīng)式布局

這個(gè)我也是直接copy過(guò)來(lái)的。

 var resize = (function(){
    window.onresize = ()=>{resize();};
    var flag;
    return function(){
      clearTimeout(flag);
      flag = setTimeout(()=>{onload();},500);
      return this;
    }

需要說(shuō)明的是，onload,dealScroll,resize這3個(gè)函數(shù)，后面我都加上"return this". 目的是可以進(jìn)行鏈?zhǔn)秸{(diào)用，以備后面重用性的需要。

最后說(shuō)兩句

響應(yīng)式布局的流行真的很突然，慢慢的，慢慢的我沒有防備。感覺在11年和12年的時(shí)候簡(jiǎn)直就是一種風(fēng)尚，而現(xiàn)在回味過(guò)來(lái)，看這個(gè)布局方法，感覺精髓依在的。我們也可以進(jìn)行變通，我們可以往右滑，右邊節(jié)點(diǎn)增加。獲得抖抖手機(jī)，節(jié)點(diǎn)增加，這些都是可以完成的。(因?yàn)橹饕倪壿嬑覀円呀?jīng)有了，只是判斷增加的方式變了而已)。

我這里寫的一部分內(nèi)容，應(yīng)該算是(云網(wǎng)頁(yè))吧。大家有興趣可以直接拷貝到自己的IDE或者Sublime里面進(jìn)行測(cè)試，數(shù)據(jù)都是放在云端的。

大家如果真的對(duì)前端有興趣的話，造輪子就是一個(gè)最好的辦法。就像我們小時(shí)候做計(jì)算題，事實(shí)上這些題目早就有了，已經(jīng)有無(wú)數(shù)人做過(guò)。那我們做還有什么意義呢？如果你這樣想的話，你已經(jīng)把你自己給平庸化了(不是平凡化)。你抱著的是一個(gè)，這個(gè)別人做過(guò)了，我做了又沒有什么用，還沒有別人做的好，我不想做。。。但是，有沒有想過(guò)，為什么你叫這個(gè)名字，你為什么在這個(gè)城市長(zhǎng)大，為什么能看到我寫的這篇文章。因?yàn)榈览砗芎?jiǎn)單，你就是一個(gè)很獨(dú)特的人，你做的任何事情都是不可復(fù)制的。當(dāng)你寫瀑布流的時(shí)候，你瀏覽的網(wǎng)站，看過(guò)的資料，寫的代碼。這些串聯(lián)起來(lái)都是你最獨(dú)特的flag。所以，造輪子不是waste 而恰恰相反是worthy，同樣就是code review一樣。只有自己做過(guò)才知道，這個(gè)東西，我真的知道。

您可能感興趣的文章: