vue实现瀑布流布局的组件有哪些瀑布流布局作为当下颇受欢迎的一种网页设计方式，以其错落有致、丰富多样且美观的视觉表现著

瀑布流布局作为当下颇受欢迎的一种网页设计方式，以其错落有致、丰富多样且美观的视觉表现著称。此布局在用户滚动页面时，能够持续加载并追加数据至页面底部。本文专注于探讨Vue框架中常用的瀑布流组件

一、vue-waterfall

waterfall是一个vue.js瀑布流布局组件，基于vue2.x;Vue-Waterfall 是由 MopTym 开发的开源组件，专门用于在 Vue.js 项目中实现瀑布流布局。无论你是要做商品展示、图集展示，还是动态内容的排版，这个组件都能轻松应对。

最酷的是，它不仅支持垂直布局，还能做水平的瀑布流！而且响应式效果极佳，在窗口大小变化时会自动调整布局。

安装：代码语言：javascript

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

<script src="path/to/vue/vue.min.js"></script>
<script src="path/to/vue-waterfall/vue-waterfall.min.js"></script>
new Vue({
  ...
  components: {
    'waterfall': Waterfall.waterfall,
    'waterfall-slot': Waterfall.waterfallSlot
  },
  ...
})

github地址：github.com/MopTym/vue-…

二、vue-waterfall-easy

vue-waterfall-easy 是一个基于 Vue.js 的高效瀑布流布局组件。它简化了在 Vue 应用中实现瀑布流布局的复杂度，支持响应式设计且无需手动指定图片宽高，自动处理图片预加载和布局调整。该项目在 GitHub 上获得了超过850颗星，拥有活跃的社区贡献和MIT开源许可。

安装

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地址：github.com/lfyfly/vue-…

三、vue-virtual-collection

Vue-virtual-collection 是一个 Vue 组件，旨在高效地渲染大型集合数据。它能够有效地渲染包含大量数据的列表或集合，而不会导致用户界面卡顿或响应缓慢。这个组件主要使用 JavaScript 编写，并基于 Vue.js 框架。

Vue-virtual-collection 的核心功能是高效地渲染大型数据集合。

虚拟滚动：组件只渲染可视区域内的元素，而不是整个数据集合，这显著提升了性能。灵活的配置：用户可以定义如何计算每个单元格的大小和位置，以适应不同的布局需求。支持分组：组件允许将数据集合分成多个组，每组可以独立更新，这有助于进一步提升性能。

安装：

npm i vue-virtual-collection

引入

import Vue from 'vue'
import VirtualCollection from 'vue-virtual-collection'

Vue.use(VirtualCollection)

github地址：github.com/starkwang/v…

四、vue-grid-layout

vue-grid-layout是一个vue的可拖拽的瀑布流布局组件，并提供相应的事件进行自定义操作。而且布局可以存储和再展现。

安装：

npm install vue-grid-layout

  // 引用：
 import { GridLayout, GridItem } from 'vue-grid-layout'

  // 注册：
  components:{ GridLayout, GridItem }

 基于vue3使用
// 下载 vue-grid-layout
npm install vue-grid-layout --save
 
// 下载 vue3 插件支持
npm install vue-grid-layout@3.0.0-beta1 --save
 
// main.js中注册
import gridLayout from 'vue-grid-layout'
 
createApp(App).use(gridLayout).mount('#app')
 
// 在main.js注册后，不需要在 import 引入，直接使用（App.vue）

特点：

元素可拖动
元素可调整大小
边界检查拖动和调整大小
可以添加或删除窗口小部件而无需重建网格
布局可以序列化和恢复
自动RTL支持（调整大小不适用于2.2.0上的RTL）

github地址：github.com/jbaysolutio…

vue实现瀑布流布局的组件 有哪些