微信小程序瀑布流最好最简单的解决方案

网上能搜到的小程序瀑布流解决方案,要么代码复杂、逻辑混乱,要么实现不了业务功能,所以把我在项目中的实现方案给大家分享下。

最简单的实现方案,不适用有分页的场景。

这个方案简单的原因是因为仅仅使用了css的属性。
使用column-count 属性可以指定页面显示的列数,一般瀑布流都是2列,所以可以定义class

.list-masonry {
  column-count: 2;           //2列
  column-gap: 20rpx;       //列间距
}

界面定义也很简单