uniapp 前端瀑布流demo

vue瀑布流demo

先看效果图

再看代码

<template>
    <view class="waterfall">
        <view class="waterfall-left">
            <view class="waterfall-item" v-for="(item, index) in leftImage" :key="index" >
                <image :src="item" mode="widthFix" />
            </view>
        </view>
        <view class="waterfall-right">
            <view class="waterfall-item" v-for="(item, index) in rightImage" :key="index" >
                <image :src="item" mode="widthFix" />
            </view>
        </view>
    </view>
</template>

<script>
    import { checkImgWH } from '@/utils/imageWH.js'
    
    export default {
        components: {},
        data() {
            return {
                screenWidth: 375,
                screenHeight: 667,
                
                imageList: [],
                leftImage: [],
                rightImage: [],
            }
        },
        computed: {},
        created() {},
        onLoad() {

            // 获取系统屏幕信息
            let systemInfo = uni.getSystemInfoSync()
            this.screenHeight = systemInfo.screenHeight
            this.screenWidth = systemInfo.screenWidth
            
            // 初始化
            this.waterFall()
        },
        onShow() {},
        mounted() {},
        methods: {
            async waterFall() {
                let imageList = [
                    'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1986451467,394304688&fm=26&gp=0.jpg',
                    'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2151136234,3513236673&fm=26&gp=0.jpg',
                    'https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3228549874,2173006364&fm=26&gp=0.jpg',
                    'https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1015613717,2953594052&fm=26&gp=0.jpg',
                    'https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3054638224,4132759364&fm=26&gp=0.jpg',
                    'https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2496571732,442429806&fm=26&gp=0.jpg',
                    'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3566088443,3713209594&fm=26&gp=0.jpg',
                    'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1999921673,816131569&fm=26&gp=0.jpg',
                    'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3681880960,455182084&fm=26&gp=0.jpg',
                    'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=233301930,3031623456&fm=11&gp=0.jpg',
                    'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4132631755,1579869755&fm=26&gp=0.jpg',
                    'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3880341262,3308316348&fm=26&gp=0.jpg',
                ]
                let columns = 2 // 分为几列
                let leftImage = []
                let leftImageHeight = 0
                let rightImage = []
                let rightImageHeight = 0
                
                for (let i = 0; i < imageList.length; i++) {
                    let imageHeight = await checkImgWH(imageList[i], this.screenWidth)
                    if (leftImageHeight <= rightImageHeight) {
                        leftImageHeight += imageHeight
                        this.leftImage.push(imageList[i])
                    } else {
                        rightImageHeight += imageHeight
                        this.rightImage.push(imageList[i])
                    }
                }
                this.$forceUpdate()

                本来是想用forEach或者map的，结果报错，吐血，只好先用for循环
            },
        }，
    }
</script>

<style lang="scss">
    page {
        background: $uni-bg-color;
    }
    .waterfall {
        width: 100vw;
        height: 100vh;
        background-color: #f5f5f5;
        display: flex;
        .waterfall-left{
            width: 50%;
        }
        .waterfall-right{
            width: 50%;
        }
        .waterfall-item {
            width: 100%;
            padding: 0 1%;
            border: 1rpx solid red;
            box-sizing: border-box;
            margin-bottom: 20rpx;
            display: inline-block;
            float: unset;
            image{
                width: 100%;
            }
        }
    }
</style>

imageWH.js

export function checkImgWH (imageUrl, screenWidth) {
    return new Promise((resolve, reject) => {
        uni.getImageInfo({
            src: imageUrl,
            success: res => {
                let screenHeight = screenWidth * res.height / res.width
                resolve(screenHeight)
            }
        })
    })
}