微信小程序制作瀑布流

小吴吴吴呀2023-12-23 20:28
先看效果：
瀑布流分为左侧和右侧看代码：
html 复制代码
<view class="shops-tops">
  <view id="left">
  <view class="left">
    <image src="https://pic.imgdb.cn/item/6583d9d6c458853aef979621.jpg" class="shops-img" mode="widthFix"/>
    <view class="shops-title">
    测试呀
  </view>
    <view class="shops-city">
  河南省郑州市新东大道金水区
  </view>
  </view>
  <view class="left">
    <image src="https://pic.imgdb.cn/item/6583dab4c458853aef9b5210.jpg" class="shops-img" mode="widthFix"/>
    <view class="shops-title">
    测试呀
  </view>
    <view class="shops-city">
  河南省郑州市新东大道金水区
  </view>
  </view>
  <view class="left">
    <image src="https://pic.imgdb.cn/item/6583d9aac458853aef96e677.jpg" class="shops-img" mode="widthFix"/>
    <view class="shops-title">
    测试呀
  </view>
    <view class="shops-city">
  河南省郑州市新东大道金水区
  </view>
  </view>
  <view class="left">
    <image src="https://pic.imgdb.cn/item/6583dd88c458853aefa5c862.jpg" class="shops-img" mode="widthFix"/>
    <view class="shops-title">
    测试呀
  </view>
    <view class="shops-city">
  河南省郑州市新东大道金水区
  </view>
  </view>

  </view>
  <view class="right">
  <view class="right">
    <image src="https://pic.imgdb.cn/item/6583daefc458853aef9c432f.jpg" class="shops-img" mode="widthFix"/>
    <view class="shops-title">
    测试呀
  </view>
    <view class="shops-city">
  河南省郑州市新东大道
  </view>
  </view>
  <view class="right">
    <image src="https://pic.imgdb.cn/item/6583d92fc458853aef94ee50.jpg" class="shops-img" mode="widthFix"/>
    <view class="shops-title">
    测试呀
  </view>
    <view class="shops-city">
  河南省郑州市新东大道
  </view>
  </view>
  <view class="right">
    <image src="https://pic.imgdb.cn/item/6583dd40c458853aefa4e709.jpg" class="shops-img" mode="widthFix"/>
    <view class="shops-title">
    测试呀
  </view>
    <view class="shops-city">
  河南省郑州市新东大道
  </view>
  </view>
  <view class="right">
    <image src="https://pic.imgdb.cn/item/6583db0ac458853aef9cb144.jpg" class="shops-img" mode="widthFix"/>
    <view class="shops-title">
    测试呀
  </view>
    <view class="shops-city">
  河南省郑州市新东大道
  </view>
  </view>
  </view>
  </view>
原创作者：吴小糖
创作时间：2023.12.21