瀑布流原理以及實現

瀑布流在多個網站均可以看到，例如百度圖片，pinterest，看起來很好看，實現起來也很簡單。在先前我其實想用插件的，可是插件一時爽，全家火葬場。須要依賴的東西太多了，網上有waterfall，masonry這些插件，看了waterfall的源碼，須要依賴handlebars，還有jQuery。在公司項目中移動端使用的是zepto，那又須要引用jquery，handlebars感受就特別蠢，因此乾脆本身動手實現一個瀑布流。

原理

瀑布流是要求佈置的元素等寬，而後在計算元素的寬度和瀏覽器寬度的比值，獲得須要佈置的列數 建立一個數組，數組的長度爲佈置的列數，初始化的時候數組內的元素都爲0 把父元素定位設置爲position: relative，計算每一個元素應該擺放的位置。

具體實現

下面是html結構：

<div class="grid">
  <div>
    <div class='grid-item'>
    </div>
    <div class='grid-item'>
    </div>
  </div>
</div>
<style>
  .grid {
    position: relative;
  }
  .grid-item {
    position: absolute;
  }
</style>
複製代碼

首先計算行數

var widthNum = parseInt($(window).width()/$(".grid-item").width()),
    allHeight = [];
    for (var i = 0; i < width; i++) {
      allHeight.push(0);
    }
    function refresh () {
      allHeight = $(new Array(widthNum)).map(function () {
        return 0;
      })
      $('grid-item').each(function () {
        var _this = $(this),
          index = 0,
          minAllHeight = allHeight[0];
        for(var j = 0; j < allHeight.length; j++) {
          if (allHeight[j] < minAllHeight) {
            minAllHeight = allHeight[j];
            index = j;
          }
        }
        _this.css({
          "left": index * _this.width(),
          "top": minAllHeight
        });
        allHeight[index] = minAllHeight + _this.height();
      })
    }
複製代碼

排版的核心程序就在於此，refresh在於每次更改數據的時候，咱們都須要從新排版，例如一個元素的大小發生變化，添加元素，或者刪除元素，咱們都須要從新調用refresh()方法。好像就是這麼簡單，具體的本身能夠去討論，例如去請求數據後，加一個loading動畫之類的。