瀑布流布局的原理

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

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

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

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

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

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

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

  • 用函数包裹

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

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

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

你可能感兴趣的:(瀑布流布局的原理)