CSS3 瀑布流布局

<div class="fu">
    <div class="zi">内容1</div>
    <div class="zi">内容2</div>
    <div class="zi">内容3</div>
    <div class="zi">内容4</div>
    <div class="zi">内容5</div>
    <div class="zi">内容6</div>
<div>

简单的父子布局

.fu{
    -moz-column-count:2; /* Firefox */
    -webkit-column-count:2; /* Safari 和 Chrome */
    column-count:2;      /*  元素切割成2列 */
    -moz-column-gap: 30rpx;
    -webkit-column-gap: 30rpx;
    column-gap: 30rpx;    /* 列之间的间隔30rpx */
}

.zi{
    -webkit-column-break-inside:avoid;    /* 保持图片的完整性 */
    break-inside:avoid;
    overflow: auto;//兼容火狐 break-inside:avoid;
}

 注意：  会出现父元素高度过高的问题   ，   可以获取父元素高度后减去冗余高度解决

uni-app  获取元素高度代码   ， 然后操作dom修改元素信息换算成VW , 减去部分冗余高度

setTimeout(()=>{
    let height = 0
    uni.createSelectorQuery().select(".JDXL-P").fields({  
        size: true,  
    }, (data) => {  
        height = data.height;
        document.getElementById("JDXL-P").style.height =  height / 7.5 - 40 + 'vw';
        console.log(document.getElementById("JDXL-P").style.height)
        }).exec(); 
    },1500)