利用css3的属性column-count来完成瀑布流布局**
wxml
<view class="help-select-contet">
<view class="help-select-card" wx:for="{{goodArray}}" wx:key="{{index}}">
<image mode="" class="help-select-iamge" src="{{item.img}}" ></image>
<view class="help-goods-title">
{{item.name}}
</view>
</view>
</view>
wxss
.help-select-contet {
column-count: 2;
column-gap: 4rpx;
width: 100%;
}
.help-select-card {
background: #fff;
width: 320rpx;
display: inline-block; /*内部卡片需要设置为inline-block,否则会截断显示，如图一*/
justify-content: center;
flex-direction: column;
align-items: center;
padding: 20rpx 15rpx;
margin-bottom: 10rpx;
}
不正常
图一
正常
正常效果
ps:这样有一个问题就是当上拉加载的时候，它采用的是左右布局，意思就是先将左边排列好了，再排列右边。。
如果需要解决这个问题 ，后面无意间发现了一个插件大家可以试试：BrickLayOut
