                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /瀑布流布局

关于获取offsetHeight的问题

<!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>

求解脱，问题在上面！感谢