【亲测有效】vue实现瀑布流效果，vue中使用vue-waterfall2来实现瀑布流效果

最新推荐文章于 2024-09-30 14:28:41 发布

G佳伟

最新推荐文章于 2024-09-30 14:28:41 发布

阅读量195

点赞数 4

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/gjwgjw1111/article/details/141400088

版权

背景：使用了css，column原生写法和其他封装好的组件，要不就是排列的不整齐，要不就是无法实现滚动懒加载，最终找到最好的实现效果如下图

实现效果

vue中使用vue-waterfall2来实现瀑布流

操作流程

安装

使用npm安装vue-waterfall

 npm install vue-waterfall2@1.8.20 --save

项目内引用

在main.js文件中引用vue-waterfall

import waterfall from 'vue-waterfall2'
Vue.use(waterfall)

完整代码

vue html部分

<waterfall
      :col="col"---------col:划分几列，可以根据屏幕宽度来划分，其类型是数值型
      :gutterWidth="20"
      :data="list"　　　　　　　　list:是请求到的每一页数据，由于分页，获取到的只有当前页数，因此列表循环的时候，使用List,即push上每一次page+1的数据
      @loadmore="loadmore"　　当滑到页面底部后，需要加载新的数据
      :lazyDistance="200"
    >
      <template>
		写要展示内容
      </template>
    </waterfall>

vue js部分

根据屏幕尺寸设置显示列数

        getcol() {
            if (window.innerWidth > 1580) {
                this.col = 5;
            } else if (1024 < window.innerWidth < 1580) {
                this.col = 4;
            } else if (768 < window.innerWidth < 1024) {
                this.col = 3;
            }
        },

loadmore：监听当前页面加载完成-------------该页面使用了watch监听page，因此page++后未调取this.getdata();可根据需要自行调取

loadmore() {
      if (this.page <= this.length && this.loadmore) {
        this.page++;
      }
},

获取数据方法按自己项目写即可

if (this.page === 1) {
       this.List = [];
       setTimeout(() => {
         this.List = res.data.data;------------当时第一页时，将数据赋值给List
       }, 50);
     } else {
       this.List = this.List.concat(res.data.data);----------当页码大于第一页时，List拼接到后面的数组
     }