javascript - 还是关于JS数组的问题，求大神帮忙指教，谢谢哈。-PHP中文网问答

我想要的效果是，瀑布流效果。正在学习中，下面是我跟据网上的教程写的代码，教程上只讲了如何在定义数组的情况下来做，但我想即然我都能获取到要生成的p的个数，那么数组也是应该能获取到的不用定死，但是我修改后老是显示不正常，
按下在我这种方法弄的话，不知道为什么第一排生成的p的TOP值是正常的，但从第二排开始生成的p的TOP就不正常了，有的TOP的值很大。包括Left的值也不正常，求大神帮我看一下，是我写的哪里出了问题应该怎么改。

生成的p的Left与Top值如下图1：
图1

下面是我写的代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>练习1</title>
<style>
    html,body{
        width: 100%;
        height: 100%;
    }
    *{
        margin: 0px;
        padding: 0px;
    }
    #Box{
        position: relative;
        background: #AB1D1F;
        
    }
    </style>
<script>
    function least(obj){
        var initea_H = 1000000000000;
        var index = 0;
        for(var i=0;i<obj.length;i++){
            var obj_height = obj[i];
            
            if(obj_height<initea_H){
                initea_H = obj_height;
                index = i;
            }
        };
        return index;
    };
    //
    window.onload = function(){
        var oBox = document.getElementById('Box');
        var vH = document.documentElement.clientHeight;
        var vW = document.documentElement.clientWidth;
        
        var oBox_xiao = 280 + 10;
        var oBox_gesu = parseInt(vW/oBox_xiao);
        
        oBox.style.width = oBox_xiao * oBox_gesu +"px";
        //oBox.style.height = "80%";
        //alert(oBox_xiao*oBox_gesu);
        oBox.style.margin = "0px auto";
        
        
        //alert(oBox_gesu);
        var xid =oBox_gesu;
        var values = 0;
        var array_oBox = (new Array(xid+1)).join(values).split(''); 
        //alert(array_oBox);
        //var array_oBox=new Array([parseInt(oBox_gesu)]);
        
        
        //var array_oBox=[0,0,0,0];
        
        for(var i=1;i<100;i++){
            var random_a = Math.ceil(Math.random()*(300-200)+150);
            
            var mxi_index = least(array_oBox);
            
            var op = document.createElement('dvi');
            op.style.position = "absolute";
            op.style.width = 280+"px";
            op.style.height = random_a + "px";
            op.style.left = mxi_index * oBox_xiao + "px";
            op.style.top = array_oBox[mxi_index] + "px";
            op.style.backgroundColor = "#998822";
            op.style.float = "left";
            
            oBox.appendChild(op);
            
            array_oBox[mxi_index] += op.offsetHeight + 8;
            //alert(xid);
            
        }
    }
    </script>
</head>

<body >
<p id="Box">
    
</p>
</body>
</html>