亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

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

獲取offset屬性失敗

<!--?JS源生實現?-->
	<script?type="text/javascript">
		window.onload=function(){
			?waterfall('main','box');
		}

		function?waterfall(parent,box){
			//?將main下所有元素為box的盒子都取出來
			?var?oParent?=?document.getElementById(parent);
			?var?oBoxs?=?getByClass(oParent,box);
			?//?console.log(oBoxs.length);打印獲取的元素個數
			?//?計算整個頁面顯示的列數(頁面寬/Box的寬)
			?var?oBoxW?=?oBoxs[0].offsetWidth;
			?//?console.log(oBoxsW);
			?var?cols?=?Math.floor(document.documentElement.clientWidth/oBoxsW);
			?//?設置main的寬度
			?oParent.style.cssText='width:'+oBoxW*cols+'px;margin:0?auto;';?
			?var?hArr?=?[];//存放每一列的高度
			?for?(var?i?=?0;?i?<?oBoxs.length;?i++)?{
			?	if?(i<cols)?{
			?		hArr.push(oBoxs[i].offsetHeight);
			?	}else{
			?		var?minH?=?Math.min.apply(null,hArr);
			?		var?index?=?getMinhIndex(hArr,minH);
			?		oBoxs[i].style.position='absolute';
			?		oBoxs[i].style.top=minH+'px';
			?		oBoxs[i].style.left=oBoxsW*index+'px';
			?		//?oBoxs[i].style.left=oBoxs[index].offsetLeft+'px';
			?		hArr[index]+=oBoxs[i].offsetHeight;
			?	}
			?}
		}
		
		//?根據class獲取元素
		function?getByClass(parent,clsName){
			var?boxArr?=?new?Array(),//用來獲取所有class為box的元素數組
				oElements?=?parent.getElementsByTagName('*');
			for?(var?i?=?0;?i?<?oElements.length;?i++)?{
				?if?(oElements[i].classname?==?clsName)?{
				?	boxArr.push(oElements[i]);
				?}
			}
			return?boxArr;
		}

		function?getMinhIndex(arr,val){
			for(var?i?in?arr){
				if?(arr[i])=val?{
					return?i?;
				}
			}
		}
	</script>


正在回答

舉報

0/150
提交
取消
瀑布流布局
  • 參與學習       97751    人
  • 解答問題       758    個

瀑布流布局是網站比較流行的一種布局方式,教你實現三大方式

進入課程

獲取offset屬性失敗

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號