vue實現瀑布流佈局的組件/插件總彙

轉自：http://www.fly63.com/article/detial/1134

瀑布流做爲當前比較流行的一種網頁佈局方式，在視覺上呈現出良莠不齊、琳琅滿目、惟美的視覺效果，該佈局隨着頁面滾動，數據不斷加載並附加至當前頁面的尾部。這篇文章主要介紹關於vue框架中常使用的瀑布流組件，你們根據需求來進行選擇。

1、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

<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

 

2、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

 

3、vue-virtual-collection

vue-virtual-collection是一個用於有效渲染大型數據的Vue瀑布流組件。其原理上就是局部渲染和DOM回收，不會渲染所有數據，而是把當前視口中展現的Cell渲染出來，因此性能上比渲染全量數據要快太多了。

安裝：

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

 

4、vue-grid-layout

vue-grid-layout是一個vue的可拖拽的瀑布流佈局組件，並提供相應的事件進行自定義操做。並且佈局能夠存儲和再展示。

安裝：

npm install vue-grid-layout

特色：

• 元素可拖動
• 元素可調整大小
• 邊界檢查拖動和調整大小
• 能夠添加或刪除窗口小部件而無需重建網格
• 佈局能夠序列化和恢復
• 自動RTL支持（調整大小不適用於2.2.0上的RTL）

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