uni-app 瀑布流

效果图：

image.png

主要布局属性：

image.png

<!-- 商品列表 -->
        <view class="product-list">
            <template v-for="(item, index) in productList">
                <view @tap="productClick(index)" class="product-item-area">
                    <image class="product_img" :src="item.mainImageUrl"></image>
                    <view class="product-info">
                        <view class="product-info-content">
                            <text class="product-info-title">
                                <text v-if="getProducFlag(item) > 0" class="product-info-flag" :style='{background: getProducFlag(item) === 1 ? "#fda314"
                                                : (getProducFlag(item) === 2 ? "#59b0ff" 
                                                : (getProducFlag(item) === 3 ? "#9c56f2" 
                                                : (getProducFlag(item) === 4 ? "#f5324b" : "")))}'>
                                    {{getProducFlag(item) === 1 ? "自营" 
                                                : (getProducFlag(item) === 2 ? "星辰客" 
                                                : (getProducFlag(item) === 3 ? "自营闪购" 
                                                : (getProducFlag(item) === 4 ? "自有品牌" : "")))}}
                                </text>
                                {{item.productTitle}}
                            </text>
                        </view>
                        <view class="product-old-area">
                            <text class="product-old-flag">市</text>
                            <text class="product-old-sale">¥{{item.priceCost}}</text>
                        </view>
                    </view>
                    <view class="product-now-area">
                        <view class="product-jing-area">
                            <text class="product-jing-flag">惊</text>
                            <text class="product-now-price">¥{{item.priceSales}}</text>
                        </view>
                        <text class="product-now-sale">已售{{item.numSales | moreWan}}</text>
                    </view>
                </view>
            </template>
        </view>

css样式

.product-list {
                /*每行显示两格*/
        column-count: 2;
                /*格子间距*/
        column-gap: 20rpx;

        width: 100%;
        padding: 20rpx;
        box-sizing: border-box;
    }

    .product-item-area {
        box-sizing: border-box;
        overflow: hidden;
        background-color: #FFFFFF;
        /*避免在元素内部插入分页符*/
        break-inside: avoid;
        box-sizing: border-box;
        margin-bottom: 20rpx;
        border-radius: 10rpx;
        box-shadow: 0px 0px 28rpx 1rpx rgba(78, 101, 153, 0.14);
    }

    .product-content-area {
        background: #FFFFFF;
        width: 100%;
        align-items: center;
        overflow: hidden;
        break-inside: avoid;
    }

    .product_img {
        width: 100%;
        height: 308rpx;
    }

    .product-info {
        padding: 6rpx 20rpx 0rpx 20rpx
    }

    .product-info-content {
        overflow: hidden;
    }

    .product-info-flag {
        font-size: 16rpx;
        color: #FFFFFF;
        border-radius: 6rpx;
        display: inline-block;
        padding: 2rpx 6rpx 2rpx 6rpx;
        margin-right: 6rpx;
        height: 26rpx;
        line-height: 26rpx;
    }

    .product-info-title {
        font-size: 24rpx;
        color: #333333;

        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: normal;
        white-space: normal;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .product-old-area {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .product-old-area .product-old-flag {
        font-size: 16rpx;
        background: #FEA314;
        color: #FFFFFF;
        border-radius: 6rpx;
        width: 28rpx;
        height: 28rpx;
        line-height: 28rpx;
        margin-right: 6rpx;
        display: block;
        text-align: center;
    }

    .product-old-area .product-old-sale {
        font-size: 20rpx;
        color: #666666;
        text-decoration: line-through;
    }

    .product-now-area {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-left: 20rpx;
        margin-bottom: 18rpx;
        margin-top: 14rpx;
        margin-right: 20rpx;
    }

    .product-jing-area {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .product-jing-area .product-jing-flag {
        font-size: 16rpx;
        background: #EB2C3E;
        color: #FFFFFF;
        border-radius: 6rpx;
        width: 28rpx;
        height: 28rpx;
        line-height: 28rpx;
        margin-right: 6rpx;
        display: block;
        text-align: center;
    }

    .product-jing-area .product-now-price {
        font-size: 30rpx;
        color: #EB2C3E;
    }

    .product-now-sale {
        font-size: 20rpx;
        color: #999999;
    }

父布局要实现的
/每行显示两格/
column-count: 2;
/格子间距/
column-gap: 20rpx;

子布局要实现的
box-sizing: border-box;
overflow: hidden;
/避免在元素内部插入分页符/
break-inside: avoid;
box-sizing: border-box;

有更好的实现方案请留言告知