当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

随机分布DIV，不重叠，用数组写的，怎么拆分成单个的？

2012-03-31
随机分布DIV，不重叠，用数组写的，如何拆分成单个的？在线等，急!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.

随机分布DIV，不重叠，用数组写的，如何拆分成单个的？在线等，急
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>noah</title>
  <style type="text/css">
div
{
  width:100px;
  height:100px;
  border: 1px dotted red;
  background-color: #ffffff;
  position:absolute;
  overflow:auto;
}
#divContainer
{
  width: 800px;
  height: 500px;
top:130;
  border: 1px solid blue;
  background-color: #dddddd;
  overflow: hidden;
}
#cc
{
width:10;
height:10;
border: 1px dotted red;
background-color:#ffffff;
}
  </style>
</head>
<body>
  <h3>Div 不重叠随机分布！</h3>
  <div id="divContainer">
<div>
  <div><div id="cc">d01-1</div><div id="cc">d01-2</div>d01</div>
</div>
  <div>d02</div>
  <div>d03</div>
  <div>d04</div>
  <div>d05</div>
  <div>d06</div>
  <div>d07</div>
  <div>d08</div>
  </div>
</body>
<script type="text/javascript">
<!--

/*
 * 如果不希望压边，
 * 可以适当调大 iDivWidth 和 iDivHeight。
 * 对象过多会很慢
 */
var iDivWidth = 130;
var iDivHeight = 130;

var iMaxX = 800-100;
var iMaxY = 500-100;

var oPosition = new Object();
oPosition.x = 0;
oPosition.y = 0;

var aX = new Array();
var aY = new Array();

// 是否相互影响。
function isInteractOnEachOther(oPos)
{
  // For debug only.
  //alert(aX+"\n"+aY+"\n"+oPos.x+"\n"+oPos.y);
  var bIsInteract = false;

  for (var i=0; i<aX.length; i++)
  {
  if ( ((oPos.x>(aX[i]-iDivWidth))&&(oPos.x<(aX[i]+iDivWidth)))
  && ((oPos.y>(aY[i]-iDivHeight))&&(oPos.y<(aY[i]+iDivHeight))) )
  {
  bIsInteract = true;
  break;
  }
  }

  if (!bIsInteract)
  {
  aX[aX.length] = oPos.x;
  aY[aY.length] = oPos.y;
  }

  return bIsInteract;
}

var oContainer = document.getElementById("divContainer");

var obj_divs = oContainer.getElementsByTagName("div");

for(var i=0; i<obj_divs.length; i++)
{
do
{
oPosition.x = Math.ceil(Math.random()*iMaxX);
oPosition.y = Math.ceil(Math.random()*iMaxY);
}
while (isInteractOnEachOther(oPosition));

obj_divs[i].style.left = oPosition.x + "px";
obj_divs[i].style.top = oPosition.y + "px";
}

//-->
</script>
</html>


[解决办法]

HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>noah</title>    <style type="text/css">.rnd{    width:100px;    height:100px;    border: 1px dotted red;    background-color: #ffffff;    position:absolute;}#divContainer{    width: 800px;    height: 500px;    border: 1px solid blue;    background-color: #dddddd;    overflow: hidden;}    </style></head><body>    <h3>Div 不重叠随机分布！</h3>    <div id="divContainer" class="rnd">        <div class="rnd">            <div class="knowledge_text"><div class="knowledge_w">数学数学数学数</div></div>        <ul>        <li><a href="#" class="node"><img src="theme/style1/images/node.gif" alt="知识点详细信息" id="Button1" /></a></li>        <li><a href="#" class="node"><img src="theme/style1/images/node.gif" alt="选择知识点" id="Button2" /></a></li>        <li><a href="#" class="node"><img src="theme/style1/images/node.gif" alt="显示知识知识"  id="Button3"  onclick="TestShowDiv(event,this)"/></a></li>        </ul>                </div>        <div class="rnd">                 <div class="knowledge_text"><div class="knowledge_w">语文语文语文语文</div></div>                                <ul>                    <li><a href="#" class="node"><img src="theme/style1/images/node.gif" alt="知识点详细信息" id="Button3" /></a>                    </li>                    <li><a href="#" class="node"><img src="theme/style1/images/node.gif" alt="选择知识点" id="Button4" /></a>                    </li>                    <li><a href="#" class="node"><img src="theme/style1/images/node.gif" alt="显示知识知识"  id="Button5" onclick="TestShowDiv(event,this)"/></a></li>                </ul>        </div>    </div></body><script type="text/javascript"><!--/* * 如果不希望压边， * 可以适当调大 iDivWidth 和 iDivHeight。 * 对象过多会很慢 */var iDivWidth = 130;var iDivHeight = 130;var iMaxX = 800-100;var iMaxY = 500-100;var oPosition = new Object();oPosition.x = 0;oPosition.y = 0;var aX = new Array();var aY = new Array();// 是否相互影响。function isInteractOnEachOther(oPos){    // For debug only.    //alert(aX+"\n"+aY+"\n"+oPos.x+"\n"+oPos.y);    var bIsInteract = false;    for (var i=0; i<aX.length; i++)    {        if ( ((oPos.x>(aX[i]-iDivWidth))&&(oPos.x<(aX[i]+iDivWidth)))            && ((oPos.y>(aY[i]-iDivHeight))&&(oPos.y<(aY[i]+iDivHeight))) )        {            bIsInteract = true;            break;        }    }    if (!bIsInteract)    {        aX[aX.length] = oPos.x;        aY[aY.length] = oPos.y;    }    return bIsInteract;}var oContainer = document.getElementById("divContainer");var obj_divs = oContainer.getElementsByTagName("div");for(var i=0; i<obj_divs.length; i++){    if(obj_divs[i].className=="rnd"){        do        {            oPosition.x = Math.ceil(Math.random()*iMaxX);            oPosition.y = Math.ceil(Math.random()*iMaxY);        }           while (isInteractOnEachOther(oPosition));        obj_divs[i].style.left = oPosition.x + "px";        obj_divs[i].style.top = oPosition.y + "px";    }}//--></script></html> 
 
[解决办法]
To darkfxux7788: 消息看到了！

第一个版本俺偷懒了，算法有明显缺陷，

现在改好了，增加了水平间距和垂直间距两个数组，试试看

HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>dhtml.div.randomLayoutWithoutInteract.html</title>    <meta name="generator" content="editplus" />    <meta name="author" content="Gao YiXiang" />    <meta name="email" content="yixianggao@126.com" />    <meta name="keywords" content="javascript dhtml dom" />    <meta name="description" content="I love web development." />    <style type="text/css">div{    width: 100px;    height: 100px;    border: 1px dotted red;    background-color: #ffffff;    position: absolute;    overflow: auto;}#divContainer{    width: 800px;    height: 500px;    border: 1px solid blue;    background-color: #dddddd;    overflow: hidden;}    </style></head><body>    <h3>Div 不重叠随机分布！</h3>    <div id="divContainer">        <div style="width: 230px; height: 140px;">            <div style="width: 95%; height: 95%;">                d01                <div style="position: static; float: left;">d01-1</div>                <div style="position: static; float: left;">d01-2</div>            </div>        </div>        <div style="width: 125px; height: 75px; background-color: #ffff00;">d02</div>        <div>d03</div>        <div style="width: 75px; height: 125px; background-color: #00ffff;">d04</div>        <div>d05</div>        <div>d06</div>        <div>d07</div>        <div>d08</div>    </div></body><script type="text/javascript"><!--var oContainer = document.getElementById("divContainer");var iMaxX = parseInt(oContainer.currentStyle.width);var iMaxY = parseInt(oContainer.currentStyle.height);var oPosition = new Object();oPosition.x = 0;oPosition.y = 0;// 坐标数组。var aX = new Array();var aY = new Array();// 最小间隔。var iMinSpace = 10;// HS: Horizontal Space.var aHS = new Array();// VS: Vertical Space.var aVS = new Array();// 是否相互影响。function isInteractOnEachOther(oPos, iHorizontalSpace, iVerticalSpace){    // For debug only.    //alert(aX+"\n"+aY+"\n"+oPos.x+"\n"+oPos.y);    var bIsInteract = false;    for (var i=0; i<aX.length; i++)    {        if ( ((oPos.x>(aX[i]-iHorizontalSpace))&&(oPos.x<(aX[i]+aHS[i])))            && ((oPos.y>(aY[i]-iVerticalSpace))&&(oPos.y<(aY[i]+aVS[i]))) )        {            bIsInteract = true;            break;        }    }    if (!bIsInteract)    {        aX[aX.length] = oPos.x;        aY[aY.length] = oPos.y;    }    return bIsInteract;}var oContainer = document.getElementById("divContainer");//var oDivs = oContainer.getElementsByTagName("div");var oDivs = oContainer.childNodes;for(var i=0; i<oDivs.length; i++){    aHS[i] = parseInt(oDivs[i].currentStyle.width) + iMinSpace;    aVS[i] = parseInt(oDivs[i].currentStyle.height) + iMinSpace;    do    {        oPosition.x = Math.ceil(Math.random()*(iMaxX-aHS[i]));        oPosition.y = Math.ceil(Math.random()*(iMaxY-aVS[i]));    }    while (isInteractOnEachOther(oPosition, aHS[i], aVS[i]));    oDivs[i].style.left = oPosition.x + "px";    oDivs[i].style.top = oPosition.y + "px";}//--></script></html>
阅读人气排行