Js & Vue 实现瀑布布局的几种思路

实现瀑布布局思路

方案1： 每个元素设置绝对定位

实现思路

• 为每个元素设置 left / top
• 取列数高度最小的那列作为本次插入目标

优点：

• 实现过度效果更灵活，比如删除一个元素时，所有元素重新排位，可以使布局错乱感较美观。

缺陷：

• 元素都是定位的，内容动态变化时每个元素的位置得重新计算，比较耗费性能。

结构图

方案2： 先布列，再分配元素

实现思路

• 提前创建好列数
• 取列数高度最小的那列作为本次插入目标

优点：

• 计算量较少，每列的元素高度随内容进行自适应。

缺陷：

• 过度效果较弱，比如删除一个元素时，元素的位置排版会比较生硬。

结构图

这几种方案的核心就是：取出列数高度最小的那一列作为本次插入目标