jQuery实现瀑布流布局
HTML
<divid="main">
<divclass="box">
<divclass="pic">
<imgsrc="images/0.jpg"alt="">
</div>
</div>
<divclass="box">
<divclass="pic">
<imgsrc="images/1.jpg"alt="">
</div>
</div>
<divclass="box">
<divclass="pic">
<imgsrc="images/2.jpg"alt="">
</div>
</div>
<divclass="box">
<divclass="pic">
<imgsrc="images/3.jpg"alt="">
</div>
</div>
<divclass="box">
<divclass="pic">
<imgsrc="images/4.jpg"alt="">
</div>
</div>
<divclass="box">
<divclass="pic">
<imgsrc="images/2.jpg"alt="">
</div>
</div>
</div>
CSS
*{
margin:0;
padding:0;
}
#main{
position:relative;
}
.box{
padding:15px0015px;
float:left;
}
.pic{
padding:10px;
border:1pxsolid#ccc;
border-radius:5px;
box-shadow:0px0px5px#ccc;
img{
width:165px;
height:auto;
}
}
JavaScript
$(window).on("load",function(){
waterfall();
vardataInt={"data":[{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src":"6.jpg"}]}
//模拟json数据;
$(window).on("scroll",function(){
if(checkScrollSlide){
$.each(dataInt.data,function(key,value){
varoBox=$("<div>").addClass("box").appendTo($("#main"));
//jQuery支持连缀,隐式迭代;
varoPic=$("<div>").addClass('pic').appendTo($(oBox));
$("<img>").attr("src","images/"+$(value).attr("src")).appendTo(oPic);
});
waterfall();
}
})
});
//流式布局主函数;
functionwaterfall(){
var$boxs=$("#main>div");
//获取#main元素下的直接子元素div.box;
//获取每一列的宽度;
varw=$boxs.eq(0).outerWidth();
//outerWidth()获取包含padding和border在内的宽度;
//varw=$boxs.eq(0).width();
//width()只能获取给元素定义的宽度;
varcols=Math.floor($(window).width()/w);
//获取多少列;
$("#main").width(w*cols).css("margin","0auto");
//设置#main元素的宽度和居中样式;
varhArr=[];
//每一列高度的集合;
$boxs.each(function(index,value){
//遍历每一个box元素;
//为了找到之前所有元素的最低点,然后将本元素设置到最低点之下;
varh=$boxs.eq(index).outerHeight();
//每一个box元素的高,
if(index<cols){
hArr[index]=h;
//确定每列第一个元素的高度;
}else{
varminH=Math.min.apply(null,hArr);
//得出列高数组中的最小高度;
varminHIndex=$.inArray(minH,hArr);
//$.inArray()方法得出元素(minH)在数组(hArr)中的index值;
//console.log(value);
//此时的value是第一行之后的所有的box元素的DOM对象!;
$(value).css({
//$(value):将DOM对象转换成jQuery对象,才能继续使用jQuery方法;
"position":"absolute",
"top":minH+"px",
"left":minHIndex*w+"px"
});
hArr[minHIndex]+=$boxs.eq(index).outerHeight();
//最低高元素的高度+刚添加到最低高度下的元素的高度=新的列高;
};
});
//console.log(hArr);
};
functioncheckScrollSlide(){
var$lastBox=$("#main>div").last();
varlastBoxDis=$lastBox.offset().top+Math.floor($lastBox.outerHeight()/2);
varscrollTop=$(window).scrollTop();
vardocumentH=$(window).height();
return(lastBoxDis<scrollTop+documentH)?true:false;
}
详细解释清仔细参考注释吧，我就不单独再拉出来写了。