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

时间: 2018-10-10阅读: 4345标签: 布局

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


网站首页设计常见的6种布局方式

看到太多的网页设计师发布企业站的个人作品,设计中总是摆脱不了大框套小框的设计布局思路,不加思索的跳入单一的网页布局形式中,于是就有了把企业站常用的页面布局方式总结一下的想法

前端之移动页面布局

Native App 原生app手机应用程序使用原生的语言开发的手机应用,Android系统用的是java,iOS系统用的是object-C;Hybrid App 混合型app手机应用程序混合使用原生的程序和html5页面开发的手机应用

浮动,定位,flex布局

正常的布局流是将元素放置在浏览器视口内的系统:块级元素(display:block)在视口中垂直布局——每个都将显示在上一个元素下面的新行上,并且它们的外边距将分隔开它们。

CSS三栏布局的5种方法详解

假设高度已知,请写出三栏布局,其中左栏、右栏宽度各为300px,中间自适应.将浏览器窗口压窄,可以看到变化。由于上面的代码中设置的高度是min-width,而不是设置的固定高度width,所以现在看到的也就是高度不固定的情况。

CSS自定义属性+CSS Grid网格实现超级的布局能力

我在工作中使用CSS Grid已经有几个月了,我非常喜欢它在页面布局时给我的灵活性。这么长时间以来,我们一直没有一个真正的网格布局解决方案——用浮动和flexbox总是有各种各样的限制。但现在,我真的无法想象没有Grid的CSS!

css Grid布局

Gird布局是什么?Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格 ; 能够将网页分成具有简单属性的行和列来完成我们需要的网格布局

css实现div垂直水平居中的2种常用方法

利用vertical-align:middle进行垂直方向上的居中对齐,此方法需要满足的条件;这种方法比较暴力,利用定位解决:父元素开启相对定位,子元素绝对定位

前端必懂之Sticky Footer(粘性页脚)

Sticky Footer是css的一种布局场景。页脚footer永远固定在页面的底部,页面内容不够长的时候页脚黏在视窗底部,内容足够长时会被向下移动。老式门户网站由于内容过短常常版权页脚前移

第三代移动端布局方案

大家有没有发现淘宝的H5移动端没有使用任何rem和vw单位,而是和web端项目一样,使用的是px单位。虽然是px但它也很完美的将整个页面渲染了出来。那淘宝的FE是怎么实现的呢?

css vertical-align对齐规则

只能应用于内联元素以及 display 值为 table-cell 的元素。vertical-align 属性只能作用在 display 计算值为 inline、inline- block,inline-table 或 table-cell 的元素上。

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全