WaterFlow

waterFlow和Grid布局非常的类似

瀑布流容器，由“行”和“列”分割的单元格所组成，通过容器自身的排列规则，将不同大小的“项目”自上而下，如瀑布般紧密布局。

瀑布流布局的特点:

• 每一列盒子的宽度一致, 盒子的高度不一致
• 自上而下, 形成参差错落效果

columnsTemplate

设置当前瀑布流组件布局列的数量，不设置时默认1列

例如, '1fr 1fr 2fr' 是将父组件分3列，将父组件允许的宽分为4等份，第一列占1份，第二列占1份，第三列占2份。

columnsGap

设置列与列的间距

rowsGap

设置行与行的间距

案例：

 整体代码：

@Entry
@Component
struct WaterFlowCase {
  build() {
    WaterFlow() {
      // FlowItem
      FlowItem() {
        Image("https://img2.baidu.com/it/u=2900801315,2560576511&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800")
          .height(150)
      }
      FlowItem() {
        Image("https://img2.baidu.com/it/u=1898128106,2722598876&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800")
          .height(200)
      }
      FlowItem() {
        Image("https://img1.baidu.com/it/u=4124726588,2153906841&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500")
          .height(120)
      }
      FlowItem() {
        Image("https://img0.baidu.com/it/u=2723682125,109064216&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500")
          .height(140)
      }
      FlowItem() {
        Image("https://img2.baidu.com/it/u=2900801315,2560576511&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800")
          .height(150)
      }
      FlowItem() {
        Image("https://img2.baidu.com/it/u=1898128106,2722598876&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800")
          .height(220)
      }
      FlowItem() {
        Image("https://img1.baidu.com/it/u=4124726588,2153906841&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500")
          .height(200)
      }
      FlowItem() {
        Image("https://img0.baidu.com/it/u=2723682125,109064216&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500")
          .height(200)
      }
      FlowItem() {
        Image("https://img2.baidu.com/it/u=2900801315,2560576511&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800")
          .height(150)
      }
      FlowItem() {
        Image("https://img2.baidu.com/it/u=1898128106,2722598876&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800")
          .height(200)
      }
      FlowItem() {
        Image("https://img1.baidu.com/it/u=4124726588,2153906841&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500")
          .height(200)
      }
      FlowItem() {
        Image("https://img0.baidu.com/it/u=2723682125,109064216&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500")
          .height(200)
      }
    }
    .columnsTemplate("1fr 1fr 1fr")
    .columnsGap(20)
    .rowsGap(20)
    .padding(20)
  }
}