专栏首页java 微风vue 实现瀑布流布局的 组件/插件总汇:vue-waterfall、vue-waterfall-easy

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • springCloud - 1- 服务的注册与发现 Eureka

    一 、在 springcloud 中 eureka 的作用 :服务注册、服务发现 。

    微风-- 轻许--
  • 系统集成项目管理工程师(软考中级)重点知识、背诵版

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    微风-- 轻许--
  • IDEA 查看最近修改、已提交文件

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    微风-- 轻许--
  • 架构图以及vue的简介

    MVVM 由 Model,View,ViewModel 三部分构成,Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑;View 代表...

    Dawnzhang
  • vue[0x01] -- Hello World

    如果你看过一千部以上的电影,你就会发现,这世间根本没有什么离奇的事。为什么从后端或者说网页三剑客过来的哥们,会有觉得vue上手快,容易学的错觉?很大程度上,在早...

    丰臣正一
  • Jenkins pipeline 3 -- post 部分

    post 步骤在Jenkins pipeline语法中是可选的,包含的是整个pipeline或阶段完成后一些附加的步骤。 比如我们希望整个pipeline执行...

    mafeifan
  • vue 学习笔记第无弹

    syy
  • 【技术分享】五:搜索排序-特征分析

    数据决定了任务的上限,模型方法决定达到上限的能力。在这里想借助信息熵的一些概念来对数据的重要性做一些分析,将数据的分布差异度量出来,并据此得到特征对于分类的重要...

    腾讯智能钛AI开发者
  • LINK : warning LNK4075: 忽略”/EDITANDCONTINUE”(由于”/INCREMENTAL:NO”规范)

    我今天在VS2010新建了一个静态库项目,然后新建了一个测试项目,在测试项目中引用静态库项目中的lib文件。 编译的时候出现:warning LNK4075:...

    卡尔曼和玻尔兹曼谁曼
  • 使用Hexo在github上搭建个人博客

    最近正好在学习前端开发,想着搭建一个属于自己的个人博客,把自己的技能树整理整理,温故而知新。

    王大锤

扫码关注云+社区

领取腾讯云代金券