网上能搜到的小程序瀑布流解决方案，要么代码复杂、逻辑混乱，要么实现不了业务功能，所以把我在项目中的实现方案给大家分享下。
最简单的实现方案，不适用有分页的场景。
这个方案简单的原因是因为仅仅使用了css的属性。
使用column-count 属性可以指定页面显示的列数，一般瀑布流都是2列，所以可以定义class
.list-masonry {
column-count: 2; //2列
column-gap: 20rpx; //列间距
}
界面定义也很简单
<block wx:for="{{goodsList}}" wx:
2022-05-06 13:15:30
78KB
1
微信小程序——瀑布流布局（截图+源码）.zip
微信小程序——瀑布流布局（截图+源码）.zip
微信小程序——瀑布流布局（截图+源码）.zip
微信小程序——瀑布流布局（截图+源码）.zip
微信小程序——瀑布流布局（截图+源码）.zip
微信小程序——瀑布流布局（截图+源码）.zip
微信小程序——瀑布流布局（截图+源码）.zip
微信小程序——瀑布流布局（截图+源码）.zip
微信小程序——瀑布流布局（截图+源码）.zip
微信小程序——瀑布流布局（截图+源码）.zip
微信小程序——瀑布流布局（截图+源码）.zip
2022-04-18 11:05:47
1.57MB
微信小程序－瀑布流布局
说明：
实现瀑布流布局和无限下拉加载功能。
数据接口:
https://api.getweapp.com/vendor/tngou/tnfs/api/list
目录结构：
pages — 存放项目页面文件
开发环境：
微信web开发者工具 v0.11.112301
项目截图：
https://www.getweapp.com/project?projectId=583a6886e8ff074c22472f2f
2022-03-13 19:48:55
3KB
1
小程序实现左右滑动列表区域，切换菜单（横向滑动菜单，切换时自动设置选中的菜单窗口居中显示），加载显示对应瀑布流数据，页面滚动时，设置菜单栏是否置顶显示
2021-06-24 22:52:29
17KB
1