Uncaught TypeError: Cannot read property 'offsetHeight' of undefined?求指教！！！
DOMOHAHA
2016-04-07 19:15
<!Doctype>
<html>
<head>
<title>瀑布流布局</title>
<meta charset="utf-8" />
<style type="text/css">
*{padding: 0;margin:0;}
#main{
position: relative;
}
.box{ /*因为用到的offsetHeigh方法获取的包括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){
// 将图片的高度值添加到数组中
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);
// 计算及定义图片出现的位置
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;';
// 改变数组值
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;
}
// 求值在数组中的索引,arr接收的是数组，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?为什么会出现这种错误，求指教！！
1回答
-
- 韩懿軒
- 2016-04-08 00:47:02
两处错误：
第一处：计算及定义图片出现的位置中的水平位置，应为：
oBoxs[i].style.left=oBoxs[0].offsetWidth*minHIndex+'px';
第二处：定义完图片位置修改数组值时，应为：
colsH[minHIndex]+=oBoxs[i].offsetHeight;
瀑布流布局
97759 学习 · 736 问题
相似问题