微信小程序-瀑布流的两种实现方式

方式一：  

wxml：

<view class="container">
  <view class="item">
    <image src="https://gd-hbimg.huaban.com/87c12df35224c881ad939cd2a6690dd0d90a18bd9e6d7-JPuizo_fw240webp" mode="widthFix"/>
    <image src="https://gd-hbimg.huaban.com/0c52022241cb5e57a48a4920f46a62ca3933f2074649a6-GDcsAS_fw240webp" mode="widthFix"/>
  </view>
  <view class="item">
    <image src="https://gd-hbimg.huaban.com/96244c5469ac246c2b34f382073b3a9a72992f2560339a-NnOScN_fw240webp" mode="widthFix"/>
    <image src="https://gd-hbimg.huaban.com/f75a28bd208dbcebe241acbe0c133c4484a2eb5748fec-PFCNnW_fw240webp" mode="widthFix"/>
  </view>
</view>

 

wxss:

.container{
  display: flex;
  flex-direction: row;
}

.container .item{
  width: 50%;
  overflow: hidden;
}

.container .item .image{
  width: 100%;
}

方式二：

wxml：

<view class="container">
  <view class="item">
    <image src="https://gd-hbimg.huaban.com/f75a28bd208dbcebe241acbe0c133c4484a2eb5748fec-PFCNnW_fw240webp" mode="widthFix"/>
  </view>

 <view class="item">
  <image src="https://gd-hbimg.huaban.com/96244c5469ac246c2b34f382073b3a9a72992f2560339a-NnOScN_fw240webp" mode="widthFix"/>
 </view>

</view>

 

wxss:

.container
{  
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;

  -moz-column-gap: 20rpx;
  -webkit-column-gap: 20rpx;
  column-gap: 20rpx; 
}

 .container .item{
  break-inside: avoid-column;
  -webkit-column-break-inside: avoid;
}