小程序实现瀑布流布局

利用css3的属性column-count来完成瀑布流布局**
wxml

            
                
                
                    {{item.name}}
                
            
        

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