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