微信小程序制作瀑布流

先看效果:

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

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

相关推荐
chaosama1 小时前
禁止uni小程序ios端上下拉伸(橡皮筋效果)
ios·小程序
瑶琴AI前端1 小时前
uniapp实现H5和微信小程序获取当前位置(腾讯地图)
微信小程序·小程序·uni-app
丁总学Java6 小时前
页面、组件、应用、生命周期(微信小程序)
微信小程序·小程序·生命周期
编程千纸鹤11 小时前
高校宿舍信息管理系统小程序
小程序·宿舍管理小程序
说私域12 小时前
基于开源 AI 智能名片 S2B2C 商城小程序的视频号交易小程序优化研究
人工智能·小程序·零售
李少兄17 小时前
Notepad++ 更改字体大小和颜色
notepad++·技巧
丁总学Java1 天前
微信小程序,点击bindtap事件后,没有跳转到详情页,有可能是app.json中没有正确配置页面路径
微信小程序·小程序·json
说私域1 天前
基于开源 AI 智能名片、S2B2C 商城小程序的用户获取成本优化分析
人工智能·小程序
mosen8681 天前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
qq22951165021 天前
微信小程序的汽车维修预约管理系统
微信小程序·小程序·汽车