瀑布流布局的原理

• 瀑布流布局是宽度固定，高度随机，从上到下的布局方式

• 父元素相对定位(relative),子元素绝对定位（absolute）且固定宽度。

• 获取子元素宽度和浏览器宽度，以便计算当前浏览器宽度下可以放几列。即浏览器宽度/元素宽度

• 建立一个数组，其值为每列子元素高度总和，初始值设为0

• 遍历该数组得到最小值和其下标

• 后一元素位置就在高度最小的那一列，其top为原高度，即当前最小高度left为宽度*下标

• 重新计算该列的高度，再遍历找出最小高度，后一元素放在高度最小的那列，往后以此类推

• 用函数包裹

• 监听浏览器事件resize，当浏览器宽度有变化时，调用该函数

• 在浏览器没有变化时要默认执行一次函数

版权归吴秀芳和饥人谷所有，若有转载，请注明来源