小程序中使用瀑布流组件的记录

一、使用场景

在使用uniapp编写的小程序中做图片标题的数据展示，采用瀑布流布局

二、业务方法

在进行业务编写过程中采取了几种方法进行

1、进行左右两列元素的动态高度进行判断，将图片数据塞入，进行高度判断，

优点：数据展示左右排列，做到动态展示不会出现某一列特别出现留白情况

缺点：数据展示过慢，会出现一张张图片跳出的情况；

我采用的是皮皮平博主写的手把手写一个uniapp小程序瀑布流组件_uniapp瀑布流-CSDN博客

 可以作为参考

2、后端返回的数据中带上框高进行比例计算，或者采用uni自带的获取图片属性api进行计算

瀑布流布局深度解析（js版） - 掘金 (juejin.cn)

3、采用flex布局。直接进行左右分列展示，手动控制最大高度和溢出隐藏

因为时间问题，我实在不好意思了哈哈采用了最简单的flex布局，只要数据量够多。用户上传图片格式为竖图，就不会有太大问题

三、代码

 我的很懒的css，

.user-ul {
		box-sizing: border-box;
		padding: 22rpx 30rpx;
		padding-bottom: 110px;
		background-color: #FAFAFA;
		display: flex;

		.user-ul-left,
		.user-ul-right {
			flex: 1;
			overflow: hidden;

			.box {
				background-color: #ffffff;
				border-radius: 10rpx;
				box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
				margin: 16rpx 0;

				.imgBox {
					border-top-left-radius: 10rpx;
					border-top-right-radius: 10rpx;
					max-height: 448rpx;
					overflow: hidden;

					image {
						width: 100%;
					}
				}
			}

			.text-break-all {
				font-size: 24rpx;
				font-weight: 600;
				color: #1D2129;
				line-height: 34rpx;
				word-break: break-all;
				margin: 12rpx;
			}

			.userMsg {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 0 16rpx;
				padding-bottom: 16rpx;

				.left {
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 20rpx;
					font-weight: 400;
					color: #3E4452;
					line-height: 28rpx;

					.userImg {
						height: 24rpx;
						width: 24rpx;
						border-radius: 50%;
						margin-right: 8rpx;
					}

					.userName {
						font-size: 20rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #3E4452;
						line-height: 28rpx;
					}
				}

				.right {
					display: flex;
					font-size: 20rpx;
					font-weight: 400;
					color: #3E4452;
					line-height: 28rpx;
					align-items: center;

					.heartImg {
						width: 24rpx;
						height: 20rpx;
						margin-right: 4rpx;
					}

					text {
						font-size: 20rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #3E4452;
						line-height: 28rpx;
					}
				}
			}
		}

		.user-ul-left {
			box-sizing: border-box;
			padding-right: 8rpx;
		}

		.user-ul-right {
			box-sizing: border-box;
			padding-left: 8rpx;
		}
	}

如果侵权请联系我进行相关文档删除