Uncaught TypeError: Cannot read property 'offsetHeight' of undefined?求指教?。?！
<!Doctype>
<html>
?<head>
? ?<title>瀑布流布局</title>
? ?<meta charset="utf-8" />
? <style type="text/css">
? ? *{padding: 0;margin:0;}
? ? #main{
? ? ? ? position: relative;
? ? }
? ? .box{ ? /*因?yàn)橛玫降膐ffsetHeigh方法獲取的包括padding，但是不包括margin*/
? ? ? ? padding: 15px 0 0 15px;
? ? ? ? float:left;
? ? }
? ? .pic{
? ? ? ? padding: 10px;
? ? ? ? border:1px solid #ccc;
? ? ? ? box-shadow: 0 0 6px #ccc;
? ? ? ? border-radius: 5px;
? ? }
? ? .pic img{
? ? ? ? width:162px;
? ? ? ? height:auto;
? ? }
</style>
?</head>
?<body>
? ? ?<div id="main">
? <div class="box">
? <div class="pic">
? <img src="images/0.jpg" />
? </div>
? </div>
? <div class="box">
? <div class="pic">
? <img src="images/1.jpg" />
? </div>
? </div>
? <div class="box">
? <div class="pic">
? <img src="images/2.jpg" />
? </div>
? </div>
? <div class="box">
? <div class="pic">
? <img src="images/3.jpg" />
? </div>
? </div>
? <div class="box">
? <div class="pic">
? <img src="images/4.jpg" />
? </div>
? </div>
? <div class="box">
? <div class="pic">
? <img src="images/5.jpg" />
? </div>
? </div>
? <div class="box">
? <div class="pic">
? <img src="images/6.jpg" />
? </div>
? </div>
? <div class="box">
? <div class="pic">
? <img src="images/7.jpg" />
? </div>
? </div>
? <div class="box">
? <div class="pic">
? <img src="images/8.jpg" />
? </div>
? </div>
? <div class="box">
? <div class="pic">
? <img src="images/9.jpg" />
? </div>
? </div>
? <div class="box">
? <div class="pic">
? <img src="images/10.jpg" />
? </div>
? </div>
</div>
<script type="text/javascript">
?window.onload=function(){
? ? ?waterfall('main','box');
}
function waterfall(parent,box){
? var oParent=document.getElementById(parent);
? var oBoxs=getByClass(oParent,box);
? var cols=parseInt(document.documentElement.clientWidth/oBoxs[0].offsetWidth);
? var colsH=[];
for(var i=0;i<oBoxs.length;i++){
? ? if(i<cols){
? ? ? ?// 將圖片的高度值添加到數(shù)組中
? ? ? ?colsH[i]=oBoxs[i].offsetHeight;
? ? ? ?//console.log(colsH[i]);
? ? }else{
? ? ? // 求最小值和最小值的索引
? ? ? var minH=Math.min.apply(null,colsH);
? ? ? //console.log(minH);
? ? ? var minHIndex=getMinhIndex(colsH,minH);
? ? ? //console.log(minHIndex);
// 計算及定義圖片出現(xiàn)的位置
? ? ? oBoxs[i].style.position='absolute';
? ? ? oBoxs[i].style.left=oBoxs[0]*minHIndex+'px';
? ? ? //console.log(oBoxs[minHIndex].offsetHeight);
? ? ? oBoxs[i].style.top=oBoxs[minHIndex].offsetHeight+'px';
? ? ? oParent.style.cssText="width:"+cols*oBoxs[0].offsetWidth+'px;margin:0 auto;';
? ? ? // 改變數(shù)組值
? ? ? colsH[i]+=oBoxs[i].offsetHeight;
? ? ?}
? ? }
? }
function getByClass(parent,clsName){
? var boxArr=new Array(),?
? ? ? oElements=parent.getElementsByTagName('*');
? for(var i=0;i<oElements.length;i++){
? ? if(oElements[i].className==clsName){
? ? ? boxArr.push(oElements[i]);
? ? }
? }
? return boxArr;
}
// 求值在數(shù)組中的索引,arr接收的是數(shù)組，val接收的是判斷的值?
function getMinhIndex(arr,val){
? for(var i=0;i<arr.length;i++){
? ? if(arr[i]==val){
? ? ? return i;
? ? }
? }
}
</script>
?</body>
</html>
Uncaught TypeError: Cannot read property 'offsetHeight' of undefined?為什么會出現(xiàn)這種錯誤，求指教??！
2016-04-08
兩處錯誤：
第一處：計算及定義圖片出現(xiàn)的位置中的水平位置，應(yīng)為：
第二處：定義完圖片位置修改數(shù)組值時，應(yīng)為：