微信小程序制作瀑布流

先看效果:

瀑布流分为左侧和右侧 看代码:

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

相关推荐
CSDN专家-赖老师(软件之家)16 分钟前
养老院管理系统+小程序项目需求分析文档
vue.js·人工智能·小程序·mybatis·springboot
dccose9 小时前
vue3 uniapp 扫普通链接或二维码打开小程序并获取携带参数
小程序·uni-app
tian-ming14 小时前
JavaWeb后端开发知识储备2
notepad++
尘浮生15 小时前
Java项目实战II基于微信小程序的校运会管理系统(开发文档+数据库+源码)
java·开发语言·数据库·微信小程序·小程序·maven·intellij-idea
尘浮生19 小时前
Java项目实战II基于微信小程序的电影院买票选座系统(开发文档+数据库+源码)
java·开发语言·数据库·微信小程序·小程序·maven·intellij-idea
HerayChen1 天前
微信小程序混合 h5 wx.miniProgram是 undefined
微信小程序·小程序·h5
耶啵奶膘1 天前
uniapp+vue2全局监听退出小程序清除缓存
小程序·uni-app
中云DDoS CC防护蔡蔡1 天前
微信小程序被攻击怎么选择高防产品
服务器·网络安全·微信小程序·小程序·ddos
井眼1 天前
微信小程序-prettier 格式化
微信小程序·小程序