今天跟大家分享一个瀑布流网页布局,先跟大家分析下实现的思路吧
主要思路：一、根据屏幕宽度和单个浮动层的宽度来确定浮动层列数
var $boxs = $("#main>div")
var boxw = $boxs.eq().outerWidth();
var clos = Math.floor($(window).width()/boxw);
$("#main").width(boxw*clos).css('margin','0 auto');
二、用绝对定位来确定浮动层的位置，在这里我的浮动层里放一个图片来展示效果
var hArr=[];
$boxs.each(function(index, element) {
var h=$boxs.eq(index).outerHeight();
if(index<clos){
hArr[index]=h;
}
else{
var minH=Math.min.apply(null,hArr);
var minHindex=$.inArray(minH,hArr);
$(element).css({
'position':'absolute',
'top':minH+'px',
'left':minHindex*boxw+'px'
})
hArr[minHindex]+=$boxs.eq(index).outerHeight();
}
三、根据屏幕显示高度+滚动条高度和最后一个浮动层的top值来确定执行滚动事件
$(window).scroll(function(){
if(checkscroll){
for(var i=;i<;i++){
var obox=$("<div>").addClass("box").appendTo($("#main"));
var opic=$("<div>").addClass("pic").appendTo($(obox));
$("<img>").attr('src','images/'+ i +".jpg").appendTo($(opic));
}
waterfall();
}
})
function checkscroll(){
var lasttop=$("#main>div").last().offset().top+=Math.floor($("#main>div").last().outerHeight()/);
var scrolltop= $(window).scrollTop();
var documeth= $(window).height();
return(lasttop>scrolltop+documeth)?true:false;
}
例子请点击这里 例子（多刷新下页面看完整效果）