uniapp实现瀑布流

 首先template

			
				
					
					{{ item.title }}
					{{ item.synopsis }}
					
						￥{{ item.price }}
						
							￥{{ item.original_price }}
						
					
				
			

在修改样式

.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',
        },
      ],

改一下数据即可使用