瀑布流布局的原理介绍
废话不多说,先上图
瀑布流页面排版
- 可以看出按列排列,内容的宽度固定、高度大小不一。
- 首先怎么才能实习这种错落有致的排列呢? 浮动?NO! 用绝对定位才能更好地满足我们的要求。
- 怎么定位的问题解决了,但是怎么才能让其有序的填充到指定的位置呢?
- 将列看成关于每一列高度的数组,那么列的数目怎么确定-利用容器的宽度/每个区块的宽度就得到length(区块的高度一定要等load之后再获取高度)
- 第一列按顺序排放,此时列的高度变了,数组的内容也变了
- 第二列怎么摆放呢? 按照我们的惯性思维,第一个获得数据应该放到高度最低的列上,这样页面才能看着舒服。那么,我们先遍历数组找到列高的最小值,将其放到该位置,此时该列的高度发生变,然后下一个数据在进行判断,找到列高最小值。以此类推,下面的数据都这么放置就实现了瀑布流。