小程序使用Grid和css变量实现瀑布流布局

前言

要实现如下瀑布流效果，动态图片，动态高度

我知道使用JS能够实现完美瀑布流，但小程序不比web，坑点会比较多，因此我决定先使用CSS看能不能解决，最后实在不行在使用JS来实现

根据网上的教程尝试使用css的方式(column和flex)实现效果，但排列顺序都是竖排而不是横排，不符合产品需求，实现效果如下

GRID瀑布流

如此看来只剩grid这一条路了，还好成功了

基础版

下列摘自网上使用GRID实现瀑布流的实例

模板

<view class="waterfall">
  <view class="item">1</view>
  <view class="item">2</view>
  <view class="item">3</view>
  <view class="item">4</view>
  <view class="item">5</view>
  <view class="item">6</view>
  ...