vue-waterfall2 基于Vue.js 瀑布流组件

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

$waterfall API

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

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

vue-waterfall2 基于Vue.js 瀑布流组件

原文地址：https://www.cnblogs.com/lovellll/p/10124409.html