瀑布流布局

• 瀑布流布局的原理是什么?
• css：
  1设置容器为相对定位
  2给瀑布流子元素设置绝对定位
• JS：
  1通过获取窗口的宽度与元素的宽度的比值决定窗口将会摆放几列布局(colNum)
  2确定多少列(colNum)后，创建一个以colNum为长度初始值为0的数组colSumHeight。（假设每一列的总高度为0）
  3假设第一个数组colSumHeight[0]为最小高度idx假设为0，遍历colSumHeight数组的每一项与之比较（第一次布局高度初始都为0所以按顺序排列），第一次布局后数组colSumHeight被赋值。
  4之后布局每次都与colSumHeight[0]相比较，当判断出现子元素高度比colSumHeight[0]小时，记录下idx序号，通过css设置此元素排列到此列下。
  5以此方法把每项元素进行瀑布流排列
  6最后设置事件，当窗口尺寸改变时重新执行函数进行排列

实现如下瀑布流布局demo
实现代码

本博客版权归 本人和饥人谷所有，转载需说明来源