实现瀑布布局思路
方案1: 每个元素设置绝对定位
实现思路
为每个元素设置 left / top
取列数高度最小的那列作为本次插入目标
优点:
- 实现过度效果更灵活,比如删除一个元素时,所有元素重新排位,可以使布局错乱感较美观。
缺陷:
- 元素都是定位的,内容动态变化时每个元素的位置得重新计算,比较耗费性能。
结构图
方案2: 先布列,再分配元素
实现思路
提前创建好列数
取列数高度最小的那列作为本次插入目标
优点:
- 计算量较少,每列的元素高度随内容进行自适应。
缺陷:
- 过度效果较弱,比如删除一个元素时,元素的位置排版会比较生硬。
结构图
这几种方案的核心就是:取出列数高度最小的那一列作为本次插入目标