uniapp实现小程序瀑布流布局展示（1）纯css

<view class="product-list-content">

<!-- 瀑布流布局 -->
<scroll-view scroll-y="true">
    <view class="list-content-layout">
        <view class="Index">
            <!-- 瀑布流布局列表 -->
            <view class="pubuBox">
                    <view class="pubuItem">
                        <view class="item-masonry" v-for="(item, index) in comnList" :key="index">
                         <image :src="item.img" mode="widthFix"></image>
                            <!-- 这是没有高度的父盒子下半部分 -->
                        <view class="listtitle">
                            <view class="listtitle1">{{ item.name }}</view>
                            <view class="listtitle2">
                                    <text class="listtitle2son">￥</text>
                                    {{ item.commdityPrice }}
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</scroll-view>
</view>

<style>

	.product-list-content {

		// 瀑布流
		page {
			background-color: #fff;
			height: 100%;
		}

		.pubuBox {
			padding: 22rpx;
		}

		.pubuItem {
			column-count: 2;
			column-gap: 20rpx;
		}

		.item-masonry {
			box-sizing: border-box;
			border-radius: 15rpx;
			overflow: hidden;
			background-color: #fff;
			break-inside: avoid;
			/*避免在元素内部插入分页符*/
			box-sizing: border-box;
			margin-bottom: 20rpx;
			box-shadow: 0 1px 6px 0 #00000020;
		}

		.item-masonry image {
			width: 100%;
		}

		.listtitle {
			padding-left: 22rpx;
			font-size: 24rpx;
			padding-bottom: 22rpx;

			.listtitle1 {
				width: 95%;
				padding-top: 10rpx;
				line-height: 39rpx;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				-webkit-box-orient: vertical;
				min-height: 39rpx;
				max-height: 78rpx;
				font-weight: 600;
				font-size: 30rpx;
			}

			.listtitle2 {
				color: #ff0000;
				font-size: 32rpx;
				line-height: 32rpx;
				font-weight: bold;
				padding-top: 8rpx;

				.listtitle2son {
					font-size: 32rpx;
				}
			}

		}

		.Index {
			width: 100%;
			height: 100%;
		}
	}

</style>