vue-waterfall-rapid

一款高性能vue瀑布流组件，支持各种使用场景，灵活度高，简单易用。

1.支持没有图片高度 && 不影响渲染速度、可以拿无尺寸大图测试布局速度。

2.支持在图片各加载节点独立绑定动画。

3.支持根据容器尺寸改变自适应。

4.支持无图。

5.只输出一个长列表，不耦合滚动功能，自由度高，适用场景广。

6.图片懒加载功能待开发...

Demo

https://coding-pages-bucket-415964-8382475-13401-506140-1252701316.cos-website.ap-hongkong.myqcloud.com

ps：demo里的图片均没有设置图片高度，如果知道高度是秒出的

使用

1.安装

npm i vue-waterfall-rapid

2.示例

template

<div class="main" @scroll="scroll">
    <waterfall :col="col" :autoResize="autoResize" :moveTransitionDuration="0.4" :fillBox="fillBox" :col-width="colWidth" :list="list" ref="waterfall" imgKey="src">
        <!-- 两种图片绑定模式
        1.指定图片的Key（ imgKey="src"）
        2.在img标签上加class（ class="waterfall-img"） -->
        <!-- img标签如果设置宽高会渲染的更快 -->
        <div class="waterfall-item" :class="{bounceIn:item.state == 'show'}" slot-scope="item">
            <img v-if="item.data.src" style="width: 100%" class="waterfall-img" :src="item.data.src">
            {{item.index}}-{{item.data.text}}
        </div>
    </waterfall>
</div>

javascript

import waterfall from 'vue-waterfall-rapid'
export default {
    name: 'vue-waterfall-rapid',
    components: {
        waterfall
    },
    data(){
        return{
            //是否根据容器尺寸自动计算重绘
            autoResize:true,
            //是否始终填满容器
            fillBox: false,
            //列宽-有指定列数则此属性失效
            colWidth: window.innerWidth / 5,
            //列数
            col: 0,
            //图片数据
            list: []
        }
    },
    mounted(){
        this.$refs.waterfall.onRender = (res)=>{
            console.log('渲染完毕',res);
        }
    },
    methods:{
        scroll(e){
            // console.log(e)
        }
    }
}

插槽内属性（slot-scope）

{
    index: 0, //当前元素下标
    data: {}, //当前元素数据
    state: 'show', //当前元素的渲染状态
}
/**
* state对应值说明：
* 'complete'， // 元素内图片加载完成
* 'show'， // 元素显示（可以用来绑定显示动画）
*/

参数

属性	类型	缺省值	描述
list	Array	[]	要渲染的数据
imgKey	String	src	指定图片在list里的key（或者在img标签上加 class="waterfall-img"）
col	Number	3	列数，手动设置时会覆盖掉colWidth
colWidth	Number	0（px）	列宽，和col冲突时，col优先
autoResize	Boolean	false	是否随容器宽度变化重绘
fillBox	Boolean	false	是否填充满容器
moveMode	String	transform	定位方式（transform、convention）
moveTransitionDuration	Number	0.4（s）	位置变化时的过渡时间

函数

函数名	参数	返回值	描述
repaints	start（开始的下标），duration（过渡时间 s）	无	手动重绘

事件

属性名	值	回调内返回值	描述
onRender	callback	{ cause（导致渲染的原因），start（开始渲染的下标） }	渲染完毕事件

/**
 * cause对应值说明：
 * 'data'， // 数据改变
 * 'resize'， // 容器宽度改变
 */

有更好的建议欢迎提issues或者提pr

喜欢的话点个star