uni-app 瀑布流

效果图：

image.png

主要布局属性：

image.png

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;

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