uniapp使用css实现瀑布流

页面

 

<template>
    <view>
        <gj v-if="likeList.length == 0"></gj>
        <view v-else class="list">
        <view class="pbl" v-for="(item,index) in likeList" :key="index">
            <view class="image">
                <image  fade-show  lazy-load :lazy-load-margin="0" mode="widthFix" :src="item.img"></image>
            </view>
            <view class="title">
                {{item.title}}
            </view>
            <view class="more">
                <view class="autohr">
                    {{item.author}}
                </view>
                <view class="like">
                    {{item.like}}
                </view>
            </view>
        </view>
        </view>
    </view>
</template>

<script>
    import gj from '../gj.vue'
    export default {
        components:{gj},
        data() {
            return {
                title: 'Hello',
                likeList:[
                ]
            }
        },
        onLoad() {
            this.getData()
        },
        methods: {
            getData(){
                setTimeout(()=>{
                    this.likeList=[{
                    title:"这样的礼物你喜欢吗?",
                    img:"https://sns-webpic-qc.xhscdn.com/202406120934/e794f1ff25b0b3492af7becb4c427e91/1040g2sg3134kh5lh6c705o7vonl08qarfhj9s30!nc_n_webp_mw_1",
                    author:"椰子哦",
                    like:"314"
                    },{
                    author:"快乐样",
                    like:"325",
                    title:"大佬点的黑桃全家桶，今晚不醉不归，大干下一场，大家一起来!!!",
                    img:"https://sns-webpic-qc.xhscdn.com/202406120934/074bf5b39465a1a7342f7ba55c9216bc/1040g2sg3134fa3k46m705nmvesrgbjaulu8a5mg!nc_n_webp_mw_1"
                    },{
                    author:"奈奈酱",
                    like:"100+",
                    title:"两个月的布偶猫怎有这么小吗?",
                    img:"https://sns-webpic-qc.xhscdn.com/202406121051/e9e0d308df72d7088a8fcd4cdd90bf8f/1040g2sg313mfvcvk1od05n99ku65h3t2t75jglg!nc_n_webp_mw_1"
                    },{
                    like:"200+",
                    author:"haha",
                    title:"哈哈哈，好可爱的小女孩,打不过...",
                    img:"https://sns-webpic-qc.xhscdn.com/202406121051/d603957a1f4edec9bffaa85cdb72b1e9/1040g0083130o59m670005oo9h6ijonkorh9paeg!nc_n_webp_mw_1"
                    },{
                    title:"这样的礼物你喜欢吗?",
                    img:"https://sns-webpic-qc.xhscdn.com/202406120934/e794f1ff25b0b3492af7becb4c427e91/1040g2sg3134kh5lh6c705o7vonl08qarfhj9s30!nc_n_webp_mw_1",
                    author:"椰子哦",
                    like:"314"
                    },{
                        like:"500+",
                        author:"不懂的茄子",
                        title:"落日好美，你喜欢吗？",
                        img:"https://sns-webpic-qc.xhscdn.com/202406121102/906ea88e8ab9f4481ceb072f8d2b1487/1040g008312onnkkr385g5nqa46lg80uph80gq4o!nc_n_webp_mw_1"
                    }]
                },300)
            }
        }
    }
</script>

<style lang="less">
    Page{
        background-color: aliceblue;
        padding-bottom: 100rpx;
    }
    .list {
        padding: 10rpx;
        column-count: 2;
        box-sizing:content-box;
        padding-right: 30rpx;
        }
    .pbl{
        width: 360rpx;
        break-inside: avoid;
        overflow: hidden;
        border-radius: 10px;
        overflow: hidden;
        margin-bottom: 20rpx;
        background-color: #fff;
        padding: 0 10rpx;
        box-sizing: border-box;
        &:last-child{
            margin-bottom: 10rpx;
        }
        .image{
            width: 100%;
            border-radius: 12rpx;
            overflow: hidden;
            margin-top: 8rpx;
            &>image{
                width: 100%;
                height: 100%;
            }
        }
        
        .title{
            font-size: 30rpx;
            margin-bottom: 6rpx;
            display: -webkit-box;
            text-overflow: ellipsis;
            overflow: hidden;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;//当属性值为3，表示超出3行隐
        }
        .more{
            display: flex;
            justify-content: space-between;
            color: #9499aa;
            margin-bottom: 6rpx;
            font-size: 26rpx;
        }
    }
</style>