vue简单实现瀑布流

最新推荐文章于 2024-09-02 20:30:25 发布

tao-cht

最新推荐文章于 2024-09-02 20:30:25 发布

阅读量2.5k

点赞数

分类专栏：前端文章标签： vue js ts

本文链接：https://blog.csdn.net/weixin_38115427/article/details/113882622

版权

本文详细介绍了瀑布流布局的原理，通过设置列数、列间距和行间距，结合JavaScript计算图片位置来实现。利用Vue，我们可以方便地创建出响应式的瀑布流布局。文章还提供了实现代码和最终效果展示，帮助读者理解并应用到自己的项目中。

摘要由CSDN通过智能技术生成

瀑布流原理

瀑布流，即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放宽高；

瀑布流布局特点，从第2行开始，接下来的每一张图片都会放在现有列中高度最低的那一列，如下图：

再继续排列下去，第6张图片应该放在第1列，以此类推，如下图：

所以每次排列一张图片时，就需要判断一次现有列中累计高度最小的列，下一张图片就排在哪一列，即瀑布流算法去判断图片的确定位置；

实现思路

目前常见瀑布流实现都采用定位布局+js计算位置（left，top）方式，搭配后端返回图片真实宽高，实现起来方便，效果更好；

设定列数，列间距，根据容器宽度计算出每列宽度；
定义行间距；
遍历元数据，生成最终瀑布流list；

根据列宽，图片宽高计算每一项的列高；
定义列高数组保存每次排列后的每列高度；
第1行特殊处理，每一项top：0，left：（列宽 + 列间距）* 当前遍历index，同时保存每列高度；
非第1行时，获取当前列高最低列index及最低列高，每一项top：最小列高 + 行间距，left：列宽 + 列间距）* 最低列index，更新最低列列高（最小列高 + 行间距 + 当前项列高）；
计算容器总高度，获取瀑布流list中top值最大的一项，top + 列高即为容器总高度；

实现代码

1、设定列数，列间距，根据容器宽度计算出每列宽度；

@Prop({ type: Number, default: 2 }) private readonly columnNum?: number; // 列数

@Prop({ type: Number, default: 10 }) private readonly columnSpan?: number;