小程序实现瀑布流布局

利用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