微信小程序如何用JS实现瀑布流布局的详细步骤？

本文共计928个文字，预计阅读时间需要4分钟。

前言 + 瀑布流 + 小程序中数据列表或图片展示，避免高度不一致，我们一般固定宽度，使其高度自适应，无缝对接。如下图所示：

瀑布流的两种做法：CSS：在父元素上使用 column-count: 2 也可固定宽度。

前言

瀑布流 - 小程序中数据列表或者图片展示难免高度不一，而我们一般固定宽度，让其高度自适应，并无缝对接。如下图：

瀑布流的两种做法：

css:

在父元素上使用column-count: 2也可以做到两列排版。但column-count: 2是左右两列排版，如果碰巧出现左边累计高度过多大于右边累计高度的话，右边会出现大片空白区域。点击前往

js(推荐):

判断左右两边的累计高度，那边的高度小，便往那边添加（需要动态获取节点元素的高度进行计算）。下面用的就是此种方法：

准备工作

我们需要用到 await ，而使用 await 需要在本地配置中开启增强编译。如下图：

实现代码

此方法采用左右两列布局，判断两边高度。