专栏首页前端开发随笔vue-waterfall-easy实现瀑布流布局

vue-waterfall-easy实现瀑布流布局

文档地址

安装

npm install vue-waterfall-easy --save-dev

页面引入

import vueWaterfallEasy from "vue-waterfall-easy";
components: {
  vueWaterfallEasy,
},

完整代码

<template>
  <div class="box">
    <div class="waterfall">
      <vue-waterfall-easy
        ref="waterfall"
        :imgsArr="imgsArr"
        @scrollReachBottom="getData"
      >
        <div class="info" slot-scope="props">第{{ props.index + 1 }}张图片</div>
      </vue-waterfall-easy>
    </div>
  </div>
</template>

<script>
import vueWaterfallEasy from "vue-waterfall-easy";
export default {
  components: {
    vueWaterfallEasy,
  },
  data() {
    return {
      imgsArr: [],
      page: 0,
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      var list = [
        {
          src:
            "https://sucai.suoluomei.cn/sucai_zs/images/20201027152322-15.jpg",
        },
        {
          src:
            "https://sucai.suoluomei.cn/sucai_zs/images/20201027152321-13.jpg",
        },
        {
          src:
            "https://sucai.suoluomei.cn/sucai_zs/images/20201027152322-14.jpg",
        },
        {
          src:
            "https://sucai.suoluomei.cn/sucai_zs/images/20201027152321-12.jpg",
        },
        {
          src:
            "https://sucai.suoluomei.cn/sucai_zs/images/20201027152320-10.jpg",
        },
        {
          src:
            "https://sucai.suoluomei.cn/sucai_zs/images/20201027152320-11.jpg",
        },
        {
          src:
            "https://sucai.suoluomei.cn/sucai_zs/images/20201027152318-8.jpg",
        },
        {
          src:
            "https://sucai.suoluomei.cn/sucai_zs/images/20201027152319-9.jpg",
        },
        {
          src:
            "https://sucai.suoluomei.cn/sucai_zs/images/20201027152300-7.jpg",
        },
        {
          src:
            "https://sucai.suoluomei.cn/sucai_zs/images/20201027152300-6.jpg",
        }
      ];
      this.page += 1;
      if (this.page == 6) {
        this.$refs.waterfall.waterfallOver();
      } else {
        this.imgsArr = this.imgsArr.concat(list);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.waterfall {
  height: 800px;
}

.info {
  text-align: center;
}
</style>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Nuxt使用vant导航栏组件tabbar

    按照我之前在vue/cli配置方法 发现watch事件刷新页面没有执行,而在vue/cli却执行 我也不想nuxt是什么原因、机制导致的 直接换种思路

    wePanda
  • Vue用keep-alive实现页面缓存

    wePanda
  • Css文字环绕圆形图片

    wePanda
  • (五)Lua脚本语言入门

    ---恢复内容开始--- 写完这篇Lua脚本语言入门,自己就要尝试去用Lua脚本语言写esp8266了,,自己现在挺心急的,因为朋友使用esp8266本来说自己...

    杨奉武
  • 游戏服务器之多进程架构通信

    游戏服务器有时需要分多个进程来处理各种负载。多个进程之间的连接处理就相对复杂了。 1、服务器进程类型 (1)登陆服务器 创建账号,检验角色账号,选择和获取并返回...

    李海彬
  • 机器学习三人行-Logistic和Softmax回归实战剖析

    关注公众号“智能算法”即可一起学习整个系列的文章 本文主要实战Logistic回归和softmax回归在iris数据集上的应用,通过该文章,希望我们能一起掌握该...

    企鹅号小编
  • 虚函数与纯虚函数的区别

    虚函数(impure virtual)   C++的虚函数主要作用是“运行时多态”,父类中提供虚函数的实现,为子类提供默认的函数实现。   子类可以重写父类...

    逐梦的青春
  • 机器学习三人行(系列六)----Logistic和Softmax回归实战剖析(附代码)

    本文主要实战Logistic回归和softmax回归在iris数据集上的应用,通过该文章,希望我们能一起掌握该方面的知识。 1. Logistic回归 我们在系...

    智能算法
  • 机器学习算法地图

    很多同学在学机器学习和深度学习的时候都有一个感受:所学的知识零散、不系统,缺乏整体感,这是普遍存在的一个问题。在这里,SIGAI对常用的机器学习和深度学习算法进...

    SIGAI学习与实践平台
  • 性能测试-Jmeter之Linux下压力测试

    我们在做测试的时候,有时候要运行很久,公司用的测试服务器一般都是linux,就可以运行在linux下面,linux下面不能像windows一样有图形化界面,那怎...

    用户6367961

扫码关注云+社区

领取腾讯云代金券