基本结构
每一张图片，外层是不可见的box，中间是可见的pic装着img，要求盒子宽度固定。
距离控制
要使多个盒子间隙相同时，指定向左浮动并且设定box的上左内边距即可，因为box不可见，实现的效果就类似于pic互相间隔开。
排列规则
先固定第一行，然后按照第一行的宽高，将后续图片插入上一行最短的图片下面。
获取文档宽度和每个盒子宽度（此处取第一个盒子），然后相除获得一行排列盒子的个数，将容器设置为盒子。
定位第一行盒子：top为0，left为单个盒子宽度×盒子顺序的下标，将每一列盒子的高度存储在一个数组中。
获取第一行盒子高度的最小值（Math.min），然后依次比较确定是第几个盒子，对于顺序大于cnum的盒子，即第一行以后，位置即在第一行最短的盒子之下，定位为absolute，top值为最短盒子的高度，left值和上面的最短盒子一样。
然后将盒子高度的数组相应列数的高度值更新，继续排列下一个盒子。
更新图片
当滚动条拉到最后张图片露出一半时，加载剩余的图片。
A 是最后一个 box 盒子的上边距（offsetTop），B 是最后一个盒子高度的一半，C 是用户拉动滚轴的长度（scrollTop），D 是页面高度（clientHeight）。从上图可以看出，当最后的 box 盒子没出到一半时满足
A+B>C+D
而当最后一个盒子出来一半时应该加载剩余图片了，此时A+B
适应浏览器宽度变化
一行能排列的盒子个数在文档刚加载完成时就固定了。当后续改变宽度时，需要随之进行改变。
在window.onresize时调用waterfall函数。
