小程序瀑布布局

小程序瀑布布局：

效果：

 

 

Wxml:

<view class="model_title" >

<text style="color:#ccc" >—</text>

<text>   照片  </text> 

<text style="color:#ccc">—</text>

</view> 

 

<view class='case-page'>

  <view class='list-masonry'>

    <view class='item-masonry' wx:for="{{zhaopian}}"  wx:key="index">

      <image src="{{item}}" mode='widthFix'  data-list="{{zhaopian}}" data-src="{{item}}" bindtap="imgYu"></image>

      <!-- <text>{{item.title}}</text> -->

    </view>

  </view>

</view>

 

 

 

 

Wxss:

.model_title{

  height: 51px;

  width: 100%;

  background: #fff;

  line-height: 51px;

  text-align: center;

  border-bottom: 1px solid #ccc;

}

 

.case-page{

  padding:20rpx;

}

.list-masonry{

  column-count: 2;

  column-gap: 20rpx;

}

.item-masonry{

  background-color: #fff;break-inside: avoid; box-sizing: border-box; padding: 20rpx;

}

.item-masonry image {

  width: 100%;

}