/vue-waterfall-rapid

💯最好用的vue瀑布流组件,吼住各种使用场景,并对渲染速度做了优化

Primary LanguageVueMIT LicenseMIT

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