javascript - 还是关于JS数组的问题，求大神帮忙指教，谢谢哈。
本文介绍了javascript - 还是关于JS数组的问题，求大神帮忙指教，谢谢哈。的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
我想要的效果是，瀑布流效果。正在学习中，下面是我跟据网上的教程写的代码，教程上只讲了如何在定义数组的情况下来做，但我想即然我都能获取到要生成的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>
解决方案
断点调试了第一次的循环
var array_oBox = (new Array(xid+1)).join(values).split(''); //这里生成的数组["0","0"]注意到里面的0是字符串吗?
array_oBox[mxi_index] += oDiv.offsetHeight + 8;//假如oDiv.offsetHeight=163,那么值为"0163"这样循环下去,数组里的值会变得非常大
这篇关于javascript - 还是关于JS数组的问题，求大神帮忙指教，谢谢哈。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
