vue 实现瀑布流布局的 组件/插件总汇:vue-waterfall、vue-waterfall-easy
转自: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
- 使用反射+缓存+委托,实现一个不同对象之间同名同类型属性值的快速拷贝
- 结构变量作为方法的参数调用,在方法内部使用的“坑”你遇到过吗?
- 使用表达式树,让访问者直接执行“角色”对象的方法
- 【更正】“给自定义控件(Web Control)添加事件的几种方法”有一个不太准确的地方。
- 在数据库上实现类似铁路售票锁票功能
- Android代码判断手机是否已root方法学习
- 实体类的枚举属性--原来支持枚举类型这么简单,没有EF5.0也可以
- Android中Context用法详解学习
- 【自然框架】之 “表单控件”与“实体类”
- Android数据存储实现的5大方式
- Android实现图片异步加载操作
- (PDF.NET框架实例讲解)将存储过程映射为实体类
- 【开源】QuickPager ASP.NET2.0分页控件——使用示例、基本应用和查询功能
- 移花接木:当泛型方法遇上抽象类----我的“内存数据库”诞生记
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法