移动端 瀑布流布局

html

<div class="tct mui-clearfix">
   <div class="tcts">
        <a href="{php echo $this->createMobileUrl('steacher',array('op'=>'details','id'=>$item['id']))}">
            <img src="/attachment/{$item['teacherphoto']}" />
            <p class="tctsp1 mui-ellipsis">{$item['teacher']}</p>
            <p class="tctsp2 mui-ellipsis">{$item['fl']}</p>
            <p class="tctsp3 mui-ellipsis">{$item['city']}</p>
        </a>
    </div>
</div>

js

//重新定义瀑布流
window.onresize = function() {
    waterFall();
};

//clientWidth 处理兼容性
function getClient() {
    return {
        width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
        height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
    }
}

// 计算瀑布流 定位
function waterFall() {
    // 1 确定图片的宽度 - 滚动条宽度
    var pageWidth = getClient().width - 30;
    var columns = 2; //2列
    var itemWidth = parseInt(pageWidth / columns); //得到item的宽度
    $(".item").width(itemWidth); //设置到item的宽度
    var arr = [];
    $(".tct .tcts").each(function(i) {
    var height = $(".tcts").eq(i).height();
    if (i < columns) {
        // 2 第一行按序布局
        $(this).css({
            top: 12,
            left: (itemWidth) * i + 10 * i + 9,
        }).addClass("tcts-opacity");
        //将行高push到数组
        arr.push(height);
    } else {
            // 其他行
            // 3 找到数组中最小高度  和 它的索引
        var minHeight = arr[0];
        var index = 0;
        for (var j = 0; j < arr.length; j++) {
            if (minHeight > arr[j]) {
                minHeight = arr[j];
                index = j;
            }
        }
        // 4 设置下一行的第一个盒子位置
        // top值就是最小列的高度
        $(this).css({
            top: arr[index] + 22, //设置30的距离
                left: $(".tct .tcts").eq(index).css("left")
        }).addClass("tcts-opacity");

        // 5 修改最小列的高度
        // 最小列的高度 = 当前自己的高度 + 拼接过来的高度
        arr[index] = arr[index] + height + 10; //设置30的距离
    }
});
if (arr[0] > arr[1]) {
    var height = arr[0];
    $(".tct").css("height", height + 50)
} else {
    var height = arr[1];
    $(".tct").css("height", height + 50)
}
}

css

.tct {
    width: 100%;
    background: #FFF;
    /* height: 61%; */
    /* padding: 0.12rem 0.06rem; */
    position: relative;
    /* overflow-y: scroll; */
    
}

.tcts {
    width: 46.4%;
    border-radius: 0.08rem;
    background: #f5f5f5;
    opacity: 0;
    /* float: left; */
    /* margin:0rem 0.06rem 0.12rem 0.06rem; */
    position: absolute;
}
.tcts:after{
    content:'';
    clear:both;
    overflow: hidden;
    height: 0rem;
    *zoom:1;
}
.tcts-opacity{
    opacity: 1 !important;
}