创建一个uniapp项目，并在pages文件夹中创建一个商品列表的页面（例如：GoodsList.vue）。

在页面中使用uni-ui组件库中的 masonry 组件来实现瀑布流布局。使用方法如下：

• 在页面中引入 masonry 组件：

  import { masonry } from '@dcloudio/uni-ui'
  

• 在页面的模板中添加 masonry 标签，并设定列数和间距：

  <masonry :cols="2" :space="10">
    <div class="item" v-for="(item, index) in goodsList" :key="index">
      <img :src="item.imgUrl" alt="">
      <p class="name">{{ item.name }}</p>
      <p class="price">{{ item.price }}</p>
    </div>
  </masonry>
  

  其中，:cols="2"表示设置瀑布流为2列，:space="10"表示设置每个商品之间的间距为10px。v-for 循环遍历 goodsList 中的商品数据，使用 item 变量表示当前商品，:key="index" 表示指定每个商品在列表中的唯一标识。

• 添加样式来美化商品列表：

  .item {
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
  }
  
  .item img {
    width: 100%;
    height: 150px;
    object-fit: cover;
  }
  
  .name {
    font-size: 14px;
    line-height: 20px;
    color: #333333;
    margin-top: 10px;
    margin-bottom: 5px;
    max-height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .price {
    font-size: 16px;
    line-height: 22px;
    color: #ff4242;
    margin-top: 5px;
  }
  

  设置商品展示区域(.item)的背景色、圆角、阴影以及溢出隐藏。设置商品图片大小、填充方式为覆盖。设置商品名称和价格的字体大小和颜色。

在页面的JS文件中定义商品列表数据（goodsList），可根据需求从后端接口获取数据。如：

data() {
  return {
    goodsList: [
      {
        id: 1,
        name: '商品一',
        price: '￥100.00',
        imgUrl: 'https://img.yzcdn.cn/vant/cat.jpeg'
      },
      {
        id: 2,
        name: '商品二',
        price: '￥200.00',
        imgUrl: 'https://img.yzcdn.cn/vant/cat.jpeg'
      },
      {
        id: 3,
        name: '商品三',
        price: '￥300.00',
        imgUrl: 'https://img.yzcdn.cn/vant/cat.jpeg'
      },
      ...
    ]
  }
}

运行 uniapp 项目，即可看到瀑布流商品列表的效果。