uni-app前端插件分享：瀑布流组件

组件地址：ext.dcloud.net.cn/plugin?id=1…

适用：小程序、快应用、H5、安卓以及ios等

引入：

<template>
    <view class="waterfall-content">
        <waterfall-lazy-image :column="column" :columnMarginTop="columnMarginTop" :columnWidth="columnWidth"
            style="width: 100%;" :selectList="selectList" :list="photoList" :isRefreshList="isRefreshList"
            @imageClick="handleImageClick">
        </waterfall-lazy-image>
        <view class="more" @click="getPage">
            loading more.
        </view>
    </view>
</template>

<script>
    import WaterfallLazyImage from '@/components/waterfall-lazy-image/waterfall-lazy-image.vue'
    export default {
        data() {
            return {
                column: 3,
                columnMarginTop: 15,
                columnWidth: 230,
                photoList: [],
                selectList: [],
                isRefreshList: false,
            };
        },
        components: {
            WaterfallLazyImage
        },
        (options) {
            this.getPage()
        },
        /**
         * 滚动加载更多
         */
        onReachBottom() {
            if (this.hasMore && !this.isLoading) {
                this.pageIndex++
                //this.getPage();
            }
        },
        methods: {
            /**
             * 分页获取
             */
            getPage() {
                this.$nextTick(() => {
                    this.photoList = [{
                            "_id": '1',
                            "fileCompressID": "https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/428a3760-7047-4e1d-9f90-7652cffda10c.jpeg",
                            // "height": 2688,  //width和height传了会按传了的处理
                            // "width": 1536
                        },
                        {
                            "_id": '2',
                            "fileCompressID": "https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/6bfa94e2-27c9-4514-ab6f-2d314015af8b.jpeg",
                            // "height": 642,
                            // "width": 321
                        },
                        {
                            "_id": '3',
                            "fileCompressID": "https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/2f8a5af9-ad19-4cb4-af29-9b45d2ca0bc0.jpg",
                            // "height": 228,
                            // "width": 136
                        },
                        {
                            "_id": '4',
                            "fileCompressID": "https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/7ffbf6d6-b818-48e6-b0a8-0b9e6116bd17.jpeg",
                            // "height": 2688,
                            // "width": 1536
                        },
                        {
                            "_id": "5",
                            "fileCompressID": "https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/1dd47d58-9282-4a7d-b553-35d601a01015.jpg",
                            // "height": 222,
                            // "width": 1536
                        }
                    ]
                })
            },
            /**
             * 点击图片回调
             */
            handleImageClick(item) {
                console.log(item);
            },
            /**
             * 更新页面数据
             */
            refreshPage() {
                this.isRefreshList = !this.isRefreshList
            },
        },
    }
</script>
<style>
    .waterfall-content {
        padding-top: 15rpx;
        width: 720rpx;
        margin: 0 auto;
    }

    .more {
        font-size: 30rpx;
        text-align: center;
    }
</style>

组件参数：

参数	类型	默认值	描述
list	Array	[]	列表数据
isRefreshList	Boolean	false	重置瀑布流列表【需要重置时候取反即可】
column	Number	3	瀑布流列数
columnWidth	Number	230	瀑布流列间距
columnMarginTop	Number	10	瀑布流图片与上张图片间距
selectList	Array	[]	选中图片列表