什么是瀑布流布局？
瀑布流布局是一种非常流行的网页布局方式，视觉上表现为参差不齐的多栏布局。最近在小程序时，我也遇到了这种布局需求，尝试了几种不同的实现方法。接下来，我将分享这些方法，并以两栏布局为例进行说明。
等高的瀑布流布局
等高的瀑布流布局，顾名思义，就是每个盒子的高度都相同。这种布局实现起来相对简单，因为不需要计算盒子的高度。举个例子：
.container {
display: flex;
flex-wrap: wrap;
}
.box {
width: 330px;
height: 330px;
margin: 30px;
background-color: #777;
}
在这个例子中，为了方便，我使用了色块代替图片内容。通过简单的 flex 布局，设置好每个盒子的宽高，就能轻松实现两栏的等高瀑布流布局。
不等高的瀑布流布局
不等高的瀑布流布局更为常见，它涉及到列高的计算。由于每个盒子的高度不同，因此需要记录和比较每一列的高度，将下一个盒子插入高度较矮的一列。下面我们来看看具体的实现方法。
已知盒子高度的情况
在瀑布流中展示的通常是图片，如果服务端返回了图片的宽高信息，实现起来就相对简单。前端只需要计算列高，将下一张图片插入较矮的那一列即可。举个例子：
.container {
display: flex;
flex-wrap: wrap;
}
.box {
width: 330px;
margin: 30px;
background-color: #777;
}
在这个例子中，我模拟了10张图片的宽高，每次从中随机取10张图片，定义了两列。每次计算一下每列的高度，将图片插入较矮的那一列，并累加高度，实现起来非常简单。
未知盒子高度的情况
如果服务端没有返回图片的宽高信息，我们可以通过 wx.getImageInfo 获取图片的宽高信息。举个例子：
.container {
display: flex;
flex-wrap: wrap;
}
.box {
width: 330px;
margin: 30px;
background-color: #777;
}
在这个例子中，为了不打乱服务端返回的图片顺序，我特意将获取图片信息的操作封装了一层，确保图片加载完一张再获取下一张。然而，当图片较大时，加载时间会较长，可能导致页面长时间白屏。
优化图片加载体验
为了优化图片加载体验，可以考虑在图片加载完成前显示一个默认的占位图。这样，用户可以在第一时间看到内容，图片信息获取后再显示实际图片。举个例子：
.container {
display: flex;
flex-wrap: wrap;
}
.box {
width: 330px;
margin: 30px;
background-color: #777;
}
.loading {
position: relative;
}
.loading::after {
content: '加载中';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #666;
}
在这个例子中，我在图片加载完成前显示了一个“加载中”的提示，虽然这只是一个简单的优化思路，但实际应用中，加载过渡动画可以设计得更加细腻。
云存储获取图片信息
小程序中使用的图片通常存储在云服务器上，云服务器一般会提供在图片请求地址上带参数获取图片信息的功能。以阿里云为例，可以在图片链接上拼接 ?x-oss-process=image/info，直接获取图片信息。举个例子：
const getImageInfo = async (url) => {
const [res] = await wx.getImageInfo(`${url}?x-oss-process=image/info`);
return res;
};
通过这种方法，可以大大减少图片加载时间，不需要将图片下载到本地再获取信息，而是直接向服务器请求图片信息。由于每次请求只返回图片的基本信息，请求时间非常短，用户体验更佳。
总结
这篇文章详细总结了我在小程序时遇到的瀑布流布局问题，并提供了不同情况下的解决方案。体验效果最好的方案是服务端直接返回图片信息，这样可以节省大量获取图片信息的时间，提升用户体验。希望这些内容对你在小程序瀑布流布局时有所帮助。
如果有任何错误或不严谨的地方，欢迎批评指正。如果你喜欢这篇文章，欢迎点赞推荐！
