<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>WaterFall-By Primes to PA</title>
<style>
*{padding: 0;margin:0;}
#main{
position: relative;
padding: 0 auto;
}
.box{
float: left;
padding: 6px;
margin: 7px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 6px #ccc;
}
.box img{
width: 162px;
display: block;
}
</style>
<script>
var data = creatdata() //把我文件夹里的图片路径全部导入到数组中。
window.onload = function(){
var main = document.getElementById('main');
createle(main,data[0]);
//在页面中创建一张图片
var checkpic = document.getElementsByClassName('box')[0];
//获取刚刚添加的那张图片然后打印他的属性，然后问题就来了。
console.dir(checkpic);
console.log(checkpic.offsetHeight);
// ？？？？？？？？？？？？？？？？？？？？？？？
// ？刚添加的那张图片offsetHeight获取值死活就是？
// ？不正确，但offsetWidth可以，dir里面显示的数？
// ？值也是正常的。为什么呢！这样我没法根据图片？
// ？的Height来进行下一步啊！我百度了好多也没有？
// ？准确的说法，最接近的是它刚加载所以没法获取？
// ？？？？？？？？？？？？？？？？？？？？？？？
}
function creatdata(){ //图片数组创建函数
var dataarr = [];
for(var i=0; i<=31; i++){
dataarr.push('./' + i + '.jpg');
}
return dataarr;
}
function createle(oParent,src){ //元素创建函数
var nbox = document.createElement('div');
nbox.className = 'box';
var nimg = document.createElement('img');
nimg.src = src;
nbox.appendChild(nimg);
oParent.appendChild(nbox);
}
</script>
</head>
<body>
<div id='main'>
</div>
</body>
</html>求解脱， 问题在上面！感谢
var data = creatdata() ;将你最开始的这句代码放在window.onload =function(){ }里面试试！
nimg.onload = function () {
console.log(nimg.offsetHeight);
} ;
Js 非阻塞执行
你用jquery试试