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

实现瀑布布局思路

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

实现思路

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

优点:

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

缺陷:

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

结构图
在这里插入图片描述

方案2: 先布列,再分配元素

实现思路

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

优点:

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

缺陷:

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

结构图

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

猜你喜欢

转载自blog.csdn.net/cookcyq__/article/details/121597544