JS瀑布流原理

前段时间，在做项目的时候，有用到瀑布流。为了方便，当时直接上的插件，自己对里面的原理还不是很清楚，为了加深印象，特此把实现记录一下。
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方法）