vue-waterfall2

  • 1.宽度自适应,数据绑定特效(适用于上拉加载更多)
  • 2.自定义程度高
  • 3.使用极为简便,适用于PC/移动端
  • 4.提供resize(强制刷新布局-适用于下拉刷新)/mix(扰乱布局) API,一般情况下不需要用到
  • 5.后期将持续更新,提供animation(过渡动画)

Demo

DEMO
GITHUB

Installation


npm install --save vue-waterfall2

Usage

注意:
1.itemWidth需要与gutterWidth一起使用才会生效,否则会进行自适应宽度(使用rem布局时,需先计算出高度再传值)
2.使用了waterfall的组件不允许使用scoped,否则样式会有问题

main.js

import waterfall from 'vue-waterfall2'
Vue.use(waterfall)
app.vue

<template>
<div class="container-water-fall">
<div><button @click="loadmore">loadmore</button> <button @click="mix">mix</button> <button @click="switchCol('5')">5列</button> <button @click="switchCol('8')">8列</button> <button @click="switchCol('10')">10列</button> </div> <waterfall :col='col' :gutterWidth="gutterWidth" :data="data" @finish="finish" >
<template >
<div class="cell-item" v-for="(item,index) in data">
<img :src="item.img" />
<div class="item-body">
<div class="item-desc">{{item.title}}</div>
<div class="item-footer">
<div class="avatar" :style="{backgroundImage : `url(${item.avatar})` }"></div>
<div class="name">{{item.user}}</div>
<div class="like" :class="item.liked?'active':''" >
<i ></i>
<div class="like-total">{{item.liked}}</div>
</div>
</div>
</div>
</div>
</template>
</waterfall> </div>
</template> /*
注意:
1.itemWidth需要与gutterWidth一起使用才会生效,否则会进行自适应宽度(使用rem布局时,需先计算出高度再传值)
2.使用了waterfall的组件不允许使用scoped,否则样式会有问题
*/ import Vue from 'vue'
export default{
data(){
return{
data:[],
col:'5',
}
},
computed:{
itemWidth(){
return (138*0.5*(document.documentElement.clientWidth/375)).toString() #rem布局 计算宽度
},
gutterWidth(){
return (9*0.5*(document.documentElement.clientWidth/375)).toString() #rem布局 计算x轴方向margin(y轴方向的margin自定义在css中即可)
}
},
methods:{
mix(){
this.$waterfall.mix()
},
switchCol(col){
this.col = col
console.log(this.col)
},
loadmore(index){
this.data = this.data.concat(this.data)
},
finish(){
console.log('finish')
}
},

<waterfall> Props

Name Default Type Desc
col '2' String the number of column
width null String the value of width
gutterWidth 10 String the value of margin
data [] Array data

$waterfall API


this.$waterfall.resize()
this.$waterfall.mix()

原文地址:https://segmentfault.com/a/1190000017042878

vue-waterfall2 基于Vue.js 瀑布流组件的更多相关文章

  1. 自己实现vue瀑布流组件,含详细注释

    我知道vue有瀑布流插件vue-waterfall-easy,但是使用的时候与我的预期有部分别,所以就自己动手写了这个组件 人和动物的根本区别是是否会使用工具,我们不仅要会使用,还要会创造工具,别人提 ...

  2. vuejs和webpack项目(VueComponent)初尝试——瀑布流组件

    碎碎念:     好久不见,最近自己有些懈怠没更过多少博,主要原因之一是对自己学习方式的一些思考,翻看之前的博客多是记录学习笔记这反映出了自己对于前端还停留在学习-复习知识点的阶段压根没多少实践经验啊 ...

  3. Vue Admin - 基于 Vue & Bulma 后台管理面板

    Vue Admin 是一个基于 Vue 2.0 & Bulma 0.3 的后台管理面板(管理系统),相当于是 Vue 版本的 Bootstrap 管理系统,提供了一组通用的后台界面 UI 和组 ...

  4. js瀑布流 原理实现揭秘 javascript 原生实现

    web,js瀑布流揭秘 瀑布流再很久之前流行,可能如我一样入行晚的 ,可能就没有机会去使用.但是这个技术终究是个挺炫酷的东西,花了一个上午来研究,用原生js实现了一个,下面会附上源码,供大家解读. 说 ...

  5. 面向对象js瀑布流效果

    index.html <!doctype html><html lang="en"> <head>  <!--网站编码格式,UTF-8 国 ...

  6. 分享:纯 css 瀑布流 和 js 瀑布流

    分享一次纯 css 瀑布流  和 js 瀑布流 纯 css 写瀑布流 1.multi-columns 方式: 通过 Multi-columns 相关的属性 column-count.column-ga ...

  7. 【js】【图片瀑布流】js瀑布流显示图片20180315

    js实现把图片用瀑布流显示,只需要“jquery-1.11.2.min.js”. js: //瀑布流显示图片 var WaterfallImg = { option: { maxWidth: 850, ...

  8. JS 瀑布流效果

    JS瀑布流效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...

  9. vue2.0的瀑布流组件-使用说明

    做一个小项目,需要瀑布流,就选他了,先看看效果 使用瀑布流布局组件:vue-waterfall-easy 下载引入: 方式一:直接从git上复制组件的完整代码,引入vue组件文件即可 import v ...

随机推荐

  1. Ubuntu 16.04 安装STS

    先将STS下载下来,网址是 https://spring.io/tools/sts/all ,然后将STS压缩包移动或者copy到想要放置的位置,比如, sudo cp spring-tool-sui ...

  2. NoSQL与关系数据库的比较

  3. MapReduce 图解流程

    Anatomy of a MapReduce Job In MapReduce, a YARN application is called a Job. The implementation of t ...

  4. 初识splay

    这东西都没什么板子着实让我很难受啊,只能到网上抄抄补补, 记下两个用到的博客 https://blog.csdn.net/clove_unique/article/details/50630280 h ...

  5. Leetcode950. Reveal Cards In Increasing Order按递增顺序显示卡牌

    牌组中的每张卡牌都对应有一个唯一的整数.你可以按你想要的顺序对这套卡片进行排序. 最初,这些卡牌在牌组里是正面朝下的(即,未显示状态). 现在,重复执行以下步骤,直到显示所有卡牌为止: 从牌组顶部抽一 ...

  6. 阿里云HBase Ganos全新升级,推空间、时空、遥感一体化基础云服务

    1.HBase Ganos是什么 Ganos是阿里云时空PaaS服务的自研核心引擎.Ganos已作为云数据库时空引擎与数据库平台融合,建立了以自研云原生数据库POALRDB为基础,联合NoSQL大数据 ...

  7. csdn vip文章:使用matlab模拟镜头失真

    原文地址 https://blog.csdn.net/lircsszz/article/details/80249017 最近在研究图像校正,现将镜头失真中常见的径向畸变(radial distort ...

  8. 在windows系统和linux系统中查询IP地址命令的不同

    在linux和windows系统上查询IP地址的命令是不一样的.         在linux中的命令行模式下,输入ifconfig即可查询到IP.而在windows系统下要查询IP地址需要先打开do ...

  9. Luogu P1273 有线电视网(树形dp+背包)

    P1273 有线电视网 题面 题目描述 某收费有线电视网计划转播一场重要的足球比赛.他们的转播网和用户终端构成一棵树状结构,这棵树的根结点位于足球比赛的现场,树叶为各个用户终端,其他中转站为该树的内部 ...

  10. ubuntu16.04环境编译gSOAP

     一.gSOAP简介 SOAP 是基于 XML 的简易协议,可使应用程序在 HTTP 之上进行信息交换.或者更简单地说:SOAP 是用于访问网络服务的协议. SOAP 提供了一种标准的方法,使得运行在 ...