茶叶网站模板,做外贸网站注意事项,外国好的设计网站大全,腾讯云网站建设流程图前些天发现了一个巨牛的人工智能学习网站#xff0c;通俗易懂#xff0c;风趣幽默#xff0c;忍不住分享一下给大家。点击跳转到教程。
瀑布流作为当前比较流行的一种网页布局方式#xff0c;在视觉上呈现出参差不齐、琳琅满目、唯美的视觉效果#xff0c;该布局随着页面…
前些天发现了一个巨牛的人工智能学习网站通俗易懂风趣幽默忍不住分享一下给大家。点击跳转到教程。
瀑布流作为当前比较流行的一种网页布局方式在视觉上呈现出参差不齐、琳琅满目、唯美的视觉效果该布局随着页面滚动数据不断加载并附加至当前页面的尾部。这篇文章主要介绍关于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 srcpath/to/vue/vue.min.js/script script srcpath/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 :imgsArrimgsArr scrollReachBottomgetData/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-collectionVue.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
