vue3 H5 移动端实现瀑布流列表

这样一个列表 

我直接上代码了

Item

<template>
  <div class="list-item-container">
    <div class="box">
      <image
        class="pro-img"
        src="https://gw.alicdn.com/tfscom/i4/O1CN01Ij5Z421cBRihslor8_!!6000000003562-0-alipicbeacon.jpg_300x300.jpg"
        mode="widthFix"
      ></image>
      <div class="good_title">
        司法考试打开链接福克斯的封建时代反击的士大夫都是开发就开始看的放款
      </div>
      <div class="good_price">
        <div class="xs-price">￥0.01</div>
        <div class="ys-price">￥10.00</div>
      </div>
    </div>
  </div>
</template>
<script setup></script>
<style lang="scss">
.list-item-container {
  border-radius: 10px;
  overflow: hidden;

  background-color: #fff;
  height: 500px;
  .box {
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 15px;
    overflow: hidden;
    .pro-img {
      width: 100%;
      height: 250px;

      image {
        width: 100%;
        height: 50%;
        border-radius: 18rpx 18rpx 0 0;
      }
    }

    .good_title {
      font-size: 30px;
      margin-top: 25px;
      font-weight: 700;
      color: #15181d;
      padding: 0 10px;
      text-align: center;
      word-break: break-all;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .good_price {
      padding: 0 20px;
      margin-top: 15px;
      display: flex;
      align-items: center;
      .xs-price {
        color: red;
        font-size: 32px;
        font-weight: 700;
      }
      .ys-price {
        text-decoration: line-through;
        margin-left: 15px;
        font-size: 26px;
      }
    }
  }
}
</style>

List

<template>
  <div class="home-list-container">
    <div class="sestion1">
      <div class="list-flex">
        <Item></Item>
      </div>
      <div class="list-flex">
        <Item></Item>
      </div>
      <div class="list-flex">
        <Item></Item>
      </div>
      <div class="list-flex">
        <Item></Item>
      </div>
    </div>
    <div class="sestion2">
      <div class="list-flex">
        <Item></Item>
      </div>
      <div class="list-flex">
        <Item></Item>
      </div>
      <div class="list-flex">
        <Item></Item>
      </div>
      <div class="list-flex">
        <Item></Item>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Item from "./item.vue";
</script>
<style lang="scss">
.home-list-container {
  display: flex;
  padding: 0 20px;

  .list-flex {
    height: 520px;
  }

  .sestion2 {
    margin-left: 20px;
  }
  .sestion1,
  .sestion2 {
    flex: 1;
  }
}
</style>