vue实现瀑布流布局的组件/插件总汇
Posted ruruo
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue实现瀑布流布局的组件/插件总汇相关的知识,希望对你有一定的参考价值。
转自:http://www.fly63.com/article/detial/1134
瀑布流作为当前比较流行的一种网页布局方式,在视觉上呈现出参差不齐、琳琅满目、唯美的视觉效果,该布局随着页面滚动,数据不断加载并附加至当前页面的尾部。这篇文章主要介绍关于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
<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是一个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
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
四、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
以上是关于vue实现瀑布流布局的组件/插件总汇的主要内容,如果未能解决你的问题,请参考以下文章