uniappH5、微信小程序手写瀑布流组件（横向展示）

使用uniapp实现瀑布流布局，H5和微信小程序都可用，瀑布流只需复制下面瀑布流的代码到页面即可，非常简洁，适用于图片大小一致的情况

功能实现展示

具体功能实现

html

		<!-- 瀑布流 -->
		<view class="pubuItem">
			<view class="item-masonry" v-for="(item, index) in flowList" :key="index">
				<view class="" @click="goToDetail(item.id)">
					<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
					<view class="listtitle">
						<view class="listtitle1">{{ item.storeName }}</view>
						<view class="flex">
							<view class="demo-price">
								￥{{item.price}}
							</view>
							<view class="demo-sale">
								已售{{item.newFicti}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

ccs

// 瀑布流
	.demo-price {
		font-size: 30rpx;
		color: $u-type-error;
		margin-top: 5px;
	}

	.demo-sale {
		font-size: 30rpx;
		margin-top: 5px;
		margin-left: 10px;
	}


	.pubuItem {
        // 第一种写法
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
		margin: 10px;
        /* 第二种写法
        column-count: 2;
		column-gap: 20rpx;
        */
	}

	.item-masonry {
		box-sizing: border-box;
		border-radius: 15rpx;
		overflow: hidden;
		background-color: #fff;
		box-shadow: 0px 0px 28rpx 1rpx rgba(78, 101, 153, 0.14);
		// 这里设置每个项占据的空间
		flex:  1 1 calc(50% - 20rpx);  /* 当屏幕足够大时，每个项目占据 50% 宽度 */
        max-width: calc(50% - 20rpx); /* 确保最大宽度不会超过 50% */
	}

	.listtitle {
		padding-left: 22rpx;
		font-size: 30rpx;
		padding: 12rpx;

		.listtitle1 {
			margin-top: 5px;
			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;
		}
	}

js

数据定义的部分

//瀑布流数据
flowList: [{
imgUrl: "https://www.logosc.cn/uploads/resources/2023/03/17/1679045108_thumb.jpg",
title: "自动驾驶汽车对交通和城市规划的未来影响与挑战",
desc: "分析自动驾驶汽车对未来交通和城市规划的潜在影响，探讨相关挑战。"
},
{
imgUrl: "https://www.logosc.cn/uploads/resources/2023/03/17/1679044581_thumb.jpg",
title: "可持续城市发展：构建环保城市的策略和实践",
desc: "分析建设可持续城市的战略和实际方法，强调环保、资源利用和城市规划的重要性。"
},
{
imgUrl: "https://www.logosc.cn/uploads/resources/2023/03/17/1679045190_thumb.jpg",
title: "消灭传染病：全球卫生领域的挑战与创新",
desc: "探讨在全球范围内消灭传染病的挑战，突出卫生领域的创新方法。"
},
{
imgUrl: "https://www.logosc.cn/uploads/resources/2023/03/17/1679044667_thumb.jpg",
title: "人工智能与机器学习：颠覆性技术对未来的巨大影响",
desc: "探讨人工智能和机器学习如何在多个领域引发革命性变革，从工业到医疗，对未来产生深远影响。"
}]