瀑布流原理以及实现

瀑布流在多个网站都可以看到，例如百度图片，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动画之类的。