uniapp实现瀑布流

 首先template

<!-- 商品内容 -->
			<view class="content">
				<view class="list" v-for="(item, index) in itemList" :key="item.id" @click="intro(item)">
					<image mode="widthFix" :src="item.img"></image>
					<view class="title">{{ item.title }}</view>
					<view class="con">{{ item.synopsis }}</view>
					<view class="con_one">
						<view class="con_one_one">￥{{ item.price }}</view>
						<view class="con_one_two">
							<s>￥{{ item.original_price }}</s>
						</view>
					</view>
				</view>
			</view>

在修改样式

.list {
		break-inside: avoid;
		width: 330rpx;
		border: 1px solid #f4f4f4;
		margin-top: 10px;
		border-radius: 20rpx;
	}

	.con {
		color: #8b8d8c;
		overflow: hidden;
		/*超出部分隐藏*/
		white-space: nowrap;
		/*禁止换行*/
		text-overflow: ellipsis;
		margin-left: 15rpx;
		margin-right: 15rpx;
		font-size: 26rpx;
	}

	.title {
		margin-left: 15rpx;
		margin-right: 15rpx;
		font-size: 26rpx;
		color: #8b8d8c;
		overflow: hidden;
		/*超出部分隐藏*/
		white-space: nowrap;
		/*禁止换行*/
		text-overflow: ellipsis;
	}

	/* 内容区 */
	.content {
		padding: 30rpx;
		box-sizing: border-box;
		column-count: 2;
	}

	image {
		width: 100%;
		border-radius: 6rpx;
	}

js中

      itemList: [
        {
          imageSrc: 'https://pic.imgdb.cn/item/65084fd3204c2e34d3a96817.jpg',
          title: '我是标题1',
          content: '我是内容1',
        },
        {
          imageSrc: 'https://pic.imgdb.cn/item/650850d7204c2e34d3a984ca.jpg',
          title: '我是标题2',
          content: '我是内容2',
        },
        {
          imageSrc: 'https://pic.imgdb.cn/item/64eee7e1661c6c8e54a86a07.jpg',
          title: '我是标题3',
          content: '我是内容3',
        },
        {
          imageSrc: 'https://pic.imgdb.cn/item/65085109204c2e34d3a9933c.jpg',
          title: '我是标题4',
          content: '我是内容4',
        },
        {
          imageSrc: 'https://pic.imgdb.cn/item/65084fd3204c2e34d3a96817.jpg',
          title: '我是标题5',
          content: '我是内容5',
        },
      ],

改一下数据即可使用