                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /瀑布流布局

滑動滾動條后，頁面內(nèi)容增加了，但是為什么滾動條的位置一直是置頂?shù)膕crollTop一直為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>

/**

?* 一、定義圖片布局函數(shù)waterfall

二、在waterfall函數(shù)中定義根據(jù)class獲取元素函數(shù)getByClass

三、計算整個父盒子的寬度且讓它在瀏覽器中水平居中

四、計算及排列每個數(shù)據(jù)塊應(yīng)該出現(xiàn)的位置，一開始數(shù)據(jù)塊緊跟在第二張圖片的后邊且位于最高的那個圖片的下邊，然后通過動畫分散到它該出現(xiàn)的位置

五、拖動滾動條時定義檢測是否具備了滾條加載數(shù)據(jù)塊條件的函數(shù)。

六、遍歷給出的數(shù)據(jù)，將圖片添加到數(shù)據(jù)塊中渲染出來

?*/

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

? ?// 調(diào)用waterfall函數(shù)

? ?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(){

?// 計算及定位數(shù)據(jù)塊顯示分散效果

? ? 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(){

? // 檢測是否具備了加載數(shù)據(jù)塊的條件

? 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 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>

過北踏居

2016-04-25

源自：瀑布流布局 5-2

關(guān)注問題我要回答

3073

操作

收起

1 回答

鱸先森回答被采納 +3 積分
2016-04-30

$(this).css({

? ? ? ? ? ? ? ? "position":"absolute",

? ? ? ? ? ? ? ? "left":"50%",

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

? ? ? ? ? ? ? ? "margin-left":"-80px"

? ? ? ? ? ? });

和你這里的top有關(guān)，好像每次運行動畫都會回到top=$(window).height()/2的位置。$(window).height()/2是個固定值，

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

鱸先森

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