先看效果:
瀑布流分为左侧和右侧 看代码:
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