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