瀑布流布局的原理及实现

问答:

  1. 瀑布流布局的原理是什么
  • 瀑布流布局,就是一堆等宽不等高的盒子元素,使用绝对定位的方式,根据盒子高度自动放入最短栏队列排齐。
  • 由于盒子元素宽度固定,根据父容器的宽度,计算一行可以放多少个盒子。用(父元素宽度/盒子宽度)获得多少列。
  • 新建一个记录列高度的数组,这个数组存放盒子排列后的每列的高度,列数是这个数组的长度,初始均为0.
  • 遍历数组,查找数值最小的元素(列高最低)及其下标,将下一个元素放到对应的位置,由于使用绝对定位,距离父容器的top=列高最低的高度,距离父容器的left=每列的宽度*数组的下标(列的个数)
  • 摆放好元素后,更新这个位置的高度,重新遍历数组,重复上一步操作,知道元素排列完成

代码:

  1. 如下瀑布流
    github库连接

瀑布流实现

文章目录
  1. 1. 问答:
  2. 2. 代码:
,