滑动滚动条后，页面内容增加了，但是为什么滚动条的位置一直是置顶的scrollTop一直为0呢？求大神们帮忙看下~
过北踏居
2016-04-25 12:26
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.js"/></script>
<title>带有分散效果的瀑布流</title>
<style type="text/css">
*{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>
<script>
/**
* 一、定义图片布局函数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 id="main">
<div class="pin">
<div class="box">
<img src="http://pica.nipic.com/2007-11-09/2007119124513598_2.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://a2.att.hudong.com/04/58/300001054794129041580438110_950.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://pic1.ooopic.com/uploadfilepic/sheji/2009-05-05/OOOPIC_vip4_20090505079ae095187332ea.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://pica.nipic.com/2007-11-09/2007119124513598_2.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://a2.att.hudong.com/04/58/300001054794129041580438110_950.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://pic1.ooopic.com/uploadfilepic/sheji/2009-05-05/OOOPIC_vip4_20090505079ae095187332ea.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://pica.nipic.com/2007-11-09/2007119124513598_2.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://a2.att.hudong.com/04/58/300001054794129041580438110_950.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://pic1.ooopic.com/uploadfilepic/sheji/2009-05-05/OOOPIC_vip4_20090505079ae095187332ea.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://pica.nipic.com/2007-11-09/2007119124513598_2.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://a2.att.hudong.com/04/58/300001054794129041580438110_950.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://pic1.ooopic.com/uploadfilepic/sheji/2009-05-05/OOOPIC_vip4_20090505079ae095187332ea.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://pica.nipic.com/2007-11-09/2007119124513598_2.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://a2.att.hudong.com/04/58/300001054794129041580438110_950.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://pic1.ooopic.com/uploadfilepic/sheji/2009-05-05/OOOPIC_vip4_20090505079ae095187332ea.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://pic1.ooopic.com/uploadfilepic/sheji/2009-05-05/OOOPIC_vip4_20090505079ae095187332ea.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://pica.nipic.com/2007-11-09/2007119124513598_2.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://a2.att.hudong.com/04/58/300001054794129041580438110_950.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://pic1.ooopic.com/uploadfilepic/sheji/2009-05-05/OOOPIC_vip4_20090505079ae095187332ea.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://pic1.ooopic.com/uploadfilepic/sheji/2009-05-05/OOOPIC_vip4_20090505079ae095187332ea.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://pica.nipic.com/2007-11-09/2007119124513598_2.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://a2.att.hudong.com/04/58/300001054794129041580438110_950.jpg"/>
</div>
</div>
<div class="pin">
<div class="box">
<img src="http://pic1.ooopic.com/uploadfilepic/sheji/2009-05-05/OOOPIC_vip4_20090505079ae095187332ea.jpg"/>
</div>
</div>
</div>
</body>
</html>
1回答
-
- 鲈先森
- 2016-04-30 15:43:02
$(this).css({
"position":"absolute",
"left":"50%",
"top":parseInt($(window).height()/2)+"px",
"margin-left":"-80px"
});
和你这里的top有关，好像每次运行动画都会回到top=$(window).height()/2的位置。$(window).height()/2是个固定值，
瀑布流布局
97759 学习 · 736 问题
相似问题