HTML
代码如下:
Box">
Box">
Box">
Box">
Box">
Box">
CSS
代码如下:
Box {
padding:15px 0 0 15px;
float:left;
}
.pic {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
Box-shadow: 0px 0px 5px #ccc;
img {
width:165px;
height:auto;
}
}
JavaScript
代码如下:
Box=$("
").addClass("Box").appendTo($("#main"));
//jQuery支持连缀,隐式迭代;
var oPic=$("
").addClass('pic').appendTo($(oBox));
$("![]()
").attr("src","images/"+$(value).attr("src")).appendTo(oPic);
});
waterfall();
}
})
});
//流式布局主函数;
function waterfall () {
var $Boxs=$("#main>div");
//获取#main元素下的直接子元素div.Box;
//获取每一列的宽度;
var w=$Boxs.eq(0).outerWidth();
//outerWidth()获取包含padding和border在内的宽度;
//var w=$Boxs.eq(0).width();
//width()只能获取给元素定义的宽度;
var cols=Math.floor($(window).width()/w);
//获取多少列;
$("#main").width(w*cols).css("margin","0 auto");
//设置#main元素的宽度和居中样式;
var hArr=[];
//每一列高度的集合;
$Boxs.each(function (index,value) {
//遍历每一个Box元素;
//为了找到之前所有元素的最低点,然后将本元素设置到最低点之下;
var h=$Boxs.eq(index).outerHeight();
//每一个Box元素的高,
if (indexdiv").last();
var lastBoxDis=$lastBox.offset().top+Math.floor($lastBox.outerHeight()/2);
var scrollTop=$(window).scrollTop();
var documentH=$(window).height();
return (lastBoxDis
详细解释清仔细参考注释吧，我就不单独再拉出来写了。
