vue 实现瀑布流布局的组件/插件总汇：vue-waterfall、vue-waterfall-easy、vue-virtual-collection、vue-grid-layout

刺骨的言语ヽ痛彻心扉 2022-01-31 13:09 1300阅读 0赞

[前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。][Link 1]

瀑布流作为当前比较流行的一种网页布局方式，在视觉上呈现出参差不齐、琳琅满目、唯美的视觉效果，该布局随着页面滚动，数据不断加载并附加至当前页面的尾部。这篇文章主要介绍关于vue框架中常使用的瀑布流组件，大家根据需求来进行选择。

## 一、vue-waterfall ##

waterfall是一个vue.js瀑布流布局组件，基于vue2.x

安装：

npm install --save vue-waterfall

Vue-waterfall是一个UMD模块，可以在CommonJS和AMD模块化环境中用作模块。在非模块化环境中，Waterfall将注册为全局变量。

引入：

ES6

/* in xxx.vue */ import Waterfall from 'vue-waterfall/lib/waterfall' import WaterfallSlot from 'vue-waterfall/lib/waterfall-slot' /* * or use ES5 code (vue-waterfall.min.js) : * import { Waterfall, WaterfallSlot } from 'vue-waterfall' */ export default { ... components: { Waterfall, WaterfallSlot }, ... }

ES5

var Vue = require('vue') var Waterfall = require('vue-waterfall') var YourComponent = Vue.extend({ ... components: { 'waterfall': Waterfall.waterfall, 'waterfall-slot': Waterfall.waterfallSlot }, ... })

Browser

> github地址：https://github.com/MopTym/vue-waterfall

## 二、vue-waterfall-easy ##

vue-waterfall-easy是一个vue组件，包含瀑布流布局和无限滚动加载。相比其他实现方式，无需在返回的数据中指定图片的宽度和高度，采用的是图片预加载之后，再排版。

安装

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

es6语法引用：

import vueWaterfallEasy from 'vue-waterfall-easy'
    export default {
      name: 'app',
      components: {
        vueWaterfallEasy
      }
    }

<vue-waterfall-easy :imgsArr="imgsArr" @scrollReachBottom="getData"></vue-waterfall-easy>

如果imgArr是替换更新，getData新请求返回的数据覆盖原来的数据。 如果imgArr是增量更新，getData新请求返回的数据与原来的数据进行合并，此时不建议使用替换更新，会浪费性能。下面这个例子就是增量更新。

> github地址：https://github.com/lfyfly/vue-waterfall-easy

## 三、vue-virtual-collection ##