html

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;

}