第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定

后加載圖片的第一列出現(xiàn)圖片重疊了,是哪里出問題了呢?

代碼和老師的差不多。

第一列的圖片多加載了,重疊在一起了。其他列正常,大神幫忙看下哪里出問題了

http://img1.sycdn.imooc.com//574ebacd00011b5004270652.jpg

$(window).on('load',function(){
	waterfall("main","pic");
	var?dataInt={'data':[{'src':'tang-31.jpg'},{'src':'tang-32.jpg'},{'src':'tang-33.jpg'},{'src':'tang-34.jpg'},{'src':'tang-35.jpg'}]};
	window.onscroll=function(){
		if?(checkscrollside())?{
			$.each(dataInt.data,function(index,value){
				var?$oPic=$('<div>').addClass('pic').appendTo($("#main"));
				var?$oBox=$('<div>').addClass('box').appendTo($oPic);
				$('<img>').attr('src','images/'+$(value).attr('src')).appendTo($oBox);
			});
			waterfall();
			};
		}
});

//實現(xiàn)瀑布排列
function?waterfall(parent,pic){
	var?$aPic=$("#main>div");
	var?iPicW=$aPic.eq(0).width();//一個列pic的寬度
	var?num=Math.floor($(window).width()/iPicW);//每行能容納的塊的個數(shù)
	$("#main").css({
		'width':iPicW*num,
		'margin':'0?auto'
	});
	

	var?picHArr=[?];//用于存儲?每列中所有塊框的高度。

	$aPic.each(function(index,value){
		var?picH=$aPic.eq(index).height();
		if(index<num){
			picHArr[index]=picH;
		}else{
			var?minH=Math.min.apply(null,picHArr);//數(shù)組中的最小值。
			var?minHIndex=$.inArray(minH,picHArr);
			$(value).css({
				'position':'absolute',
				'top':minH+15,
				'left':$aPic.eq(minHIndex).position().left
			});
			picHArr[minHIndex]+=$aPic.eq(index).outerHeight()+15;//更新添加了塊框后的列高。
		}

	});
}

function?checkscrollside(){
	var?$aPic=$("#main>div");
	var?lastPicH=$aPic.last().get(0).offsetTop+Math.floor($aPic.last().height()/2);
	//創(chuàng)建觸發(fā)添加塊框函數(shù)waterfall()】的高度:最后一個塊框的距離網(wǎng)頁頂部+自身高的一半(實現(xiàn)未滾到底就開始加載)
	var?scrollTop=$(window).scrollTop();

	var?documentH=$(document).width();//頁面高度
	return(lastPicH<scrollTop+documentH)?true:false;
}


正在回答

3 回答

換個瀏覽器試試 ?

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

var?iPicW=$aPic.eq(0).width();//width()這樣設(shè)置是不包括圖片的padding值的,也就是會比原值更小

var?num=Math.floor($(window).width()/iPicW);//既然iPicW減小了,每行能容納的塊的個數(shù)自然會增大(當(dāng)然本例因為取值原因并沒有增大)

'width':iPicW*num,//iPicW減小導(dǎo)致設(shè)置的整個div的寬度也變小了,結(jié)果減小后的div卻要容納同樣的列數(shù)num,自然會有一列重疊了

所以將var?iPicW=$aPic.eq(0).width();改為var?iPicW=$aPic.eq(0).outerWidth();即可

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

hello清風(fēng) 提問者

謝謝大神,終于解決啦。棒棒噠
2016-06-30 回復(fù) 有任何疑惑可以回復(fù)我~
????
????waterfall()里面給Main設(shè)置寬度是這樣的
????$("#main").css({
????????'width':'iPicW*num',
????????'margin':'0?auto'
????});
????
????你沒給width后面的那個加單引號,加上單引號就好了


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

hello清風(fēng) 提問者

加了,還是不行啊
2016-06-10 回復(fù) 有任何疑惑可以回復(fù)我~

舉報

0/150
提交
取消

后加載圖片的第一列出現(xiàn)圖片重疊了,是哪里出問題了呢?

我要回答 關(guān)注問題
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號