图片瀑布流

瀑布流

什么是瀑布流

瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。

制作思路

首先第一步，我们仔细观察上面的瀑布流图片，你会发现他们都是定宽不定高的。

既然定宽，那么一共显示几列，我们也就能够计算出来。如下图所示：

列数出来之后，我们拿一个数组来保存一行的高度。什么意思？看下图：

我们按照 4 列来算，一开始一张图片都没有放，每一列的高度都为 0，所以数组里面是 4 个 0

接下来放入第一张图片，找数组里面最小的，目前都是 0，就放在第一列，放完之后需要更新数组里面的最小值

然后依此类推，找数组最小的，会找到第二个 0，往第二列放入图片，更新数组，找到第三个 0，往第三列放入图片，更新数组…

目前第一行满了，该放在第二行了，但是放在第二行的第几列呢？

实际上和上面的算法是一样的，找数组的最小值即可，哪个最小就放在哪一列，放完之后更新数组

新的高度的计算公式：

这一列新的高度 = 这一列高度（数组里面存储的有） + 间隙 + 新的图片高度

然而这只是计算了 top 值，还有 left 值我们需要计算。每张图片的 left 值只和该图片所在的列有关。

函数防抖

目前为止，图片已经按照瀑布流的形式布局出来了。但是当我们改变窗体大小的时候，图片是要重新进行布局的。

这就涉及到了要监听 widnow 的 resize 事件，每当此事件触发时，就需要重新排列。

重新排列倒是很简单，只需要把前面的制作思路封装成一个函数，重新调用这个函数即可。但是这里涉及到一个函数发抖的知识。

具体的代码片段如下：

var timeId = null; // 一个计时器的 id
// 主要就是绑定窗口尺寸改变的监听事件
window.onresize = function(){
  if(timeId){
    clearTimeout(timeId);
  }
  timeId = setTimeout(function(){
    setPositions(); // 重新排列
  }, 500);
}