极客观点
项目管理
HarmonyOS
我想要的效果是，瀑布流效果。正在学习中，下面是我跟据网上的教程写的代码，教程上只讲了如何在定义数组的情况下来做，但我想即然我都能获取到要生成的DIV的个数，那么数组也是应该能获取到的不用定死，但是我修改后老是显示不正常，
按下在我这种方法弄的话，不知道为什么第一排生成的DIV的TOP值是正常的，但从第二排开始生成的DIV的TOP就不正常了，有的TOP的值很大。包括Left的值也不正常，求大神帮我看一下，是我写的哪里出了问题应该怎么改。
生成的DIV的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 oDiv = document.createElement('dvi');
oDiv.style.position = "absolute";
oDiv.style.width = 280+"px";
oDiv.style.height = random_a + "px";
oDiv.style.left = mxi_index * oBox_xiao + "px";
oDiv.style.top = array_oBox[mxi_index] + "px";
oDiv.style.backgroundColor = "#998822";
oDiv.style.float = "left";
oBox.appendChild(oDiv);
array_oBox[mxi_index] += oDiv.offsetHeight + 8;
//alert(xid);
}
}
</script>
</head>
<body >
<div id="Box">
</div>
</body>
</html>
断点调试了第一次的循环
注意到里面的0是字符串吗?
这样循环下去,数组里的值会变得非常大