前段时间，在做项目的时候，有用到瀑布流。为了方便，当时直接上的插件，自己对里面的原理还不是很清楚，为了加深印象，特此把实现记录一下。
demo
源码
主要的原理：
- 首先判断当前有多少列
- 然后把每一列的第一个元素的高度存下来
- 然后循环元素，每次找出这几列中高度最小的。然后计算元素的left和top（使用定位兼容好点）
- 如果是更新，就需要计算好了之后插入到这个总容器中。
- 最后更新当前列的高度，方便下一个循环可以拿到最近的数据
下面解释下Waterfall的主要参数
function Waterfall(opt){
this.parent = opt.parent;//父容器
this.flowItems = opt.flowItems,//元素列表
this.pin = opt.pin;// 总列数
this.width = opt.width || 400; // 元素的宽度
this.horizontalMargin = opt.horizontalMargin || 15; // 元素的水平间距
this.verticalMargin = opt.verticalMargin || 15; // 元素的垂直间距
this.columnList = new Array(this.pin);// 列高度存储的容器
}
这个demo里面没有判断高度不固定的情况(例如元素是被图片撑开，图片没加载完，是不能准确拿到宽高的)，如果有这种需求，就需要后台把宽高都传过来，前台通过宽度计算高度，然后再做操作（需要修改calculate方法）
