uniapp grid布局瀑布流

UniApp 的 Grid 布局系统中的瀑布流（Waterfall 或 Masonry）布局是一种动态网格布局方式，它可以根据屏幕尺寸和内容多少自动调整元素的排列顺序，让较宽的内容优先展示在下方，形成类似瀑布般的效果。在 UniApp 中，你可以通过设置 `justify-content` 和 `align-items` 属性为 `'end'` 来启用瀑布流布局。

以下是一个简单的例子：

<view class="grid-container">
  <view class="grid-item" v-for="(item, index) in items" :key="index">
    <image :src="item.src" />
    <!-- 可能包含更多内容 -->
  </view>
</view>

<style scoped>
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); // 自动适应宽度，最小300px
  grid-gap: 16rpx; // 列间间距
  justify-content: end; // 水平方向上向右对齐
  align-items: flex-end; // 垂直方向向下对齐
}
.grid-item {
  background-color: #f8f9fa;
  padding: 1rem;
}
</style>

在这个例子中，`items` 是一个数组，包含了需要布局的图片或组件。当屏幕大小改变时，`auto-fit` 会让列数根据内容自适应，而 `minmax(300px, 1fr)` 则确保每个格子至少有300像素宽，并尽可能地填满空间。