css 瀑布流

#### 瀑布流布局

CSS样式

/* 定义瀑布流的外层容器 */
.waterfall{
  /* 设置外边距，单位为rpx */
  margin: 0 20rpx;
  /* 定义两列布局 */
  column-count: 2;
  
  /* 定义每一个瀑布流的子项样式 */
  .waterfall-item {
    /* 设置底部外边距 */
    margin-bottom: 15rpx;
    /* 避免在该元素内部进行分页，此属性通常用于多列布局中防止内容被截断 */
    //break-inside: avoid;
  }

  /* 定义瀑布流中的图片样式 */
  .waterfall-img {
    /* 宽度为父容器的100% */
    width: 100%;
  }
}

HTML结构（使用Vue指令）

<view class="waterfall">
  <!-- 使用v-for指令遍历likeList中的每一个item，同时获取其索引值index -->
  <view class="waterfall-item" v-for="(item, index) in likeList" :key="index">
    <!-- 图片元素，其src属性绑定到item.image_vertical，使用widthFix模式来保持图片的宽度与其容器一致，同时按比例调整高度 -->
    <image :src="getImageUrl(item.image_vertical)" mode="widthFix" class="waterfall-img"></image>
  </view>
</view>

代码实现了一个简单的瀑布流布局。在CSS中，我们使用了`column-count`属性来定义两列的布局，并使用`break-inside`属性防止内容在子项内部被截断。在HTML结构中，我们使用Vue的`v-for`指令来遍历数据列表，并为每个子项创建一个容器。每个容器内部都有一个图片元素，其源地址绑定到数据列表中的相应项。