?

前些天發(fā)現(xiàn)了一個(gè)巨牛的人工智能學(xué)習(xí)網(wǎng)站，通俗易懂，風(fēng)趣幽默，忍不住分享一下給大家。點(diǎn)擊跳轉(zhuǎn)到教程。

瀑布流作為當(dāng)前比較流行的一種網(wǎng)頁布局方式，在視覺上呈現(xiàn)出參差不齊、琳瑯滿目、唯美的視覺效果，該布局隨著頁面滾動(dòng)，數(shù)據(jù)不斷加載并附加至當(dāng)前頁面的尾部。這篇文章主要介紹關(guān)于vue框架中常使用的瀑布流組件，大家根據(jù)需求來進(jìn)行選擇。

一、vue-waterfall

waterfall是一個(gè)vue.js瀑布流布局組件，基于vue2.x?

安裝：

npm install --save vue-waterfall

Vue-waterfall是一個(gè)UMD模塊，可以在CommonJS和AMD模塊化環(huán)境中用作模塊。在非模塊化環(huán)境中，Waterfall將注冊(cè)為全局變量。

引入：

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地址：https://github.com/MopTym/vue-waterfall

?

二、vue-waterfall-easy

vue-waterfall-easy是一個(gè)vue組件，包含瀑布流布局和無限滾動(dòng)加載。相比其他實(shí)現(xiàn)方式，無需在返回的數(shù)據(jù)中指定圖片的寬度和高度，采用的是圖片預(yù)加載之后，再排版。

安裝

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新請(qǐng)求返回的數(shù)據(jù)覆蓋原來的數(shù)據(jù)。 如果imgArr是增量更新，getData新請(qǐng)求返回的數(shù)據(jù)與原來的數(shù)據(jù)進(jìn)行合并，此時(shí)不建議使用替換更新，會(huì)浪費(fèi)性能。下面這個(gè)例子就是增量更新。

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

?

三、vue-virtual-collection

vue-virtual-collection是一個(gè)用于有效渲染大型數(shù)據(jù)的Vue瀑布流組件。其原理上就是局部渲染和DOM回收，不會(huì)渲染全部數(shù)據(jù)，而是把當(dāng)前視口中展示的Cell渲染出來，所以性能上比渲染全量數(shù)據(jù)要快太多了。

安裝：

npm i vue-virtual-collection

引入

import Vue from 'vue' import VirtualCollection from 'vue-virtual-collection'Vue.use(VirtualCollection) github地址：https://github.com/starkwang/vue-virtual-collection

?

四、vue-grid-layout

vue-grid-layout是一個(gè)vue的可拖拽的瀑布流布局組件，并提供相應(yīng)的事件進(jìn)行自定義操作。而且布局可以存儲(chǔ)和再展現(xiàn)。

安裝：

npm install vue-grid-layout

特點(diǎn)：

• 元素可拖動(dòng)
• 元素可調(diào)整大小
• 邊界檢查拖動(dòng)和調(diào)整大小
• 可以添加或刪除窗口小部件而無需重建網(wǎng)格
• 布局可以序列化和恢復(fù)
• 自動(dòng)RTL支持（調(diào)整大小不適用于2.2.0上的RTL）

github地址：https://github.com/jbaysolutions/vue-grid-layout

總結(jié)

以上是生活随笔為你收集整理的vue 实现瀑布流布局的 组件/插件总汇：vue-waterfall、vue-waterfall-easy、vue-virtual-collection、vue-grid-layout的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。