Js实现瀑布流

Js实现瀑布流思路

瀑布流布局的特点是等宽不等高
为了让最后一行差距最小，从第二行开始，需要将图片放在第一行最矮的图片下面，以此类推
父元素设置相对定位，图片所在元素设置为绝对定位。然后通过设置top值和left值定位每个元素

代码实现

.box{
width:100%;
position:relative;  //设置相对定位
}
.item{
position:absolute;  //设置绝对定位
}
.item{
widrh:100%;
height:100%;
}

function waterFall(){
//1首先要确定图片的宽度和滚动条的宽度
var pageWidth = getClient().width-8;
var columns = 3; //这里可以设置为几列
var itemWidth = parseInt(pageWidth/columns); //得到item的宽度

$(".item").width(itemWidth); //设置到item的宽度
var arr =[];
$(".box .item").each(function(i){
var height = $(this).find("img").height();
if(i<columns){
//2第一行按序布局
$(this).css({
top:0,
left:(itemWidth)*i+20*i,
});
//将行高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]+30, //设置30的距离
left:$(".box .item").eq(index).css("left")
});
//5修改最小列的高度
//最小列的高度 = 当前自己的高度 + 拼接过来的 高度
arr[index]=arr[index]+height+30; //设置30的距离  
}
})；
}

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

//页面尺寸改变时实时触发
window.onresize = function(){
//重新定义瀑布流
waterFall();
}
//初始化
window.onload = function(){
//实现瀑布流
waterFall();
}

如果需要动态添加数据或者动态设置列数，就需要使用js+jQ