当前位置:首页 > 网站建设 > 源码技巧 > 正文内容

vue实现瀑布流布局的组件/插件总汇

热淘网2个月前 (03-28)源码技巧74

瀑布流作为当前比较流行的一种网页布局方式,在视觉上呈现出参差不齐、琳琅满目、唯美的视觉效果,该布局随着页面滚动,数据不断加载并附加至当前页面的尾部。这篇文章主要介绍关于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



扫描二维码推送至手机访问。

版权声明:本文由网站标题发布,如需转载请注明出处。

本文链接:https://www.retao5.com/yuanma/1550.html

分享给朋友:

相关文章

友情链接代码

友情链接代码

[code]˂!--{eval $imglink .= "\n";}--˃˂!--{eval $txtlink .= "".$value[name]."\n";}--˃$imglink$txtlink...

在首页调用指定文章下的三级分类栏目名称

在首页调用指定文章下的三级分类栏目名称

[code]$value['name']: $value[name] [/code]...

ecshop2.7在IE8.0下兼容的解决方法

ecshop2.7在IE8.0下兼容的解决方法

打开[url=http://www.163.com/][color=#0000ff]www.163.com[/color][/url]你会发现有这一句,可以解决IE兼容的问题,其实很多大站都加了这句,...

一行代码解决模板兼容IE8 问题

一行代码解决模板兼容IE8 问题

前两天装了windows 7系统发现 用IE8上自己的站 边的乱七八糟在网上转了一下发现了一个简单的解决方案方法如下:只需要在页面中加入如下HTTP meta-tag: 只要IE8一读到这个标签,它就...

php使用TXT数据库(读取和修改文本)

php使用TXT数据库(读取和修改文本)

[code]文本数据库的例子本来太多,但是为了逻辑简化,最好通过专门接口实现文件与数据的转换,可以采用我下面的模板编写://文件最前面定义两个全局变量,数据库文件名和用户数组$pwd_db_file=...

模块创建使用技巧

模块创建使用技巧

在创建模块处。。如果你选择了只获取数据[b]使用获得的模板内部调用代码[/b]注:模板代码此处不赘述。将上面获取的代码复制到 SupeSite 的模板文件中(默认模板的目录为 templates/de...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。