                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /瀑布流布局

滑动滚动条后，页面内容增加了，但是为什么滚动条的位置一直是置顶的scrollTop一直为0呢？求大神们帮忙看下~

<!DOCTYPE html>

<html>

<head>

<title>带有分散效果的瀑布流</title>

*{padding: 0;margin:0;}

#main{

position: relative;

}

.pin{

padding: 15px 0 0 15px;

float:left;

}

.box{

padding: 10px;

border:1px solid #ccc;

box-shadow: 0 0 6px #ccc;

border-radius: 5px;

}

.box img{

width:162px;

height:auto;

}

</style>

/**

* 一、定义图片布局函数waterfall

二、在waterfall函数中定义根据class获取元素函数getByClass

三、计算整个父盒子的宽度且让它在浏览器中水平居中

四、计算及排列每个数据块应该出现的位置，一开始数据块紧跟在第二张图片的后边且位于最高的那个图片的下边，然后通过动画分散到它该出现的位置

五、拖动滚动条时定义检测是否具备了滚条加载数据块条件的函数。

六、遍历给出的数据，将图片添加到数据块中渲染出来

$( window ).on( "load", function(){

// 调用waterfall函数

waterfall();

var dataInt={'data':[{'src':"http://pica.nipic.com/2007-11-09/2007119124513598_2.jpg"},{'src':"http://a2.att.hudong.com/04/58/300001054794129041580438110_950.jpg"},{'src':"http://pic1.ooopic.com/uploadfilepic/sheji/2009-05-05/OOOPIC_vip4_20090505079ae095187332ea.jpg"}]};

$(window).on("scroll",function(){

// 拖动滚动条时

if(checkscrollside){

$.each(dataInt.data,function(index,value){

var $pin=$("<div>").addClass("pin").appendTo($("#main"));

var $box=$("<div>").addClass("box").appendTo($pin);

$("<img>").attr("src",$(value).attr("src")).appendTo($box);

});

waterfall();

}

});

function waterfall(){

// 计算及定位数据块显示分散效果

var $main=$("#main");

var $pins=$(".pin");

var w=$pins.eq(0).outerWidth();

var cols=parseInt($(window).width()/w);

$main.width(cols*w).css("margin","0 auto");

var arr=[];

$pins.each(function(index){

var h=$(this).outerHeight();

if(index<cols){

arr[index]=h;

}else{

var minH=Math.min.apply(null,arr);

var minHIndex=$.inArray(minH,arr);

$(this).css({

"position":"absolute",

"left":"50%",

"top":parseInt($(window).height()/2)+"px",

"margin-left":"-80px"

});

$(this).animate({

"left":minHIndex*w+"px",

"top":minH+"px",

"margin-left":"0"

},300,function(){

});

arr[minHIndex]+=h;

}

});

}

function checkscrollside(){

// 检测是否具备了加载数据块的条件

var $lastPin=$(".pin").last();

var lastPinDist=$lastPin.offset().top+parseInt($lastPin.outerHeight()/2);

var scrollTop=$(window).scrollTop();

var viewH=$(window).height();

return (lastPinDist<scrollTop+viewH)?true:false;

}

</script>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

过北踏居

2016-04-25

源自：瀑布流布局 5-2

关注问题我要回答

3025

操作

收起

1 回答

鲈先森回答被采纳 +3 积分
2016-04-30

$(this).css({

"position":"absolute",

"left":"50%",

"top":parseInt($(window).height()/2)+"px",

"margin-left":"-80px"

});

和你这里的top有关，好像每次运行动画都会回到top=$(window).height()/2的位置。$(window).height()/2是个固定值，

0 回复有任何疑惑可以回复我~

收起回答

鲈先森

$(el).css({ 'position':'absolute','top':minH+'px','left':cols*pinsW/2+'px'}); $(el).animate({ 'top': minH+'px', 'left': minHindex*pinsW+'px'},300, function() { });