<!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>楼主你测试一下,这是否你需要的功能呢?
那个宽度和高度我没帮你调,你自己根据实际情况再测试一下吧.
解决方案 »
- 急！关于用JavaScript调用ActiveX出错的问题(在线等)
- 关于验证时间范围的问题。
- 提前载入图片 NEW IMAGE[]="A.GIF",我怎么看着像定义了一个字符数组啊？
- 请问如何捕捉抛出的异常的行号?
- 一个关于如何调用该函数的问题,在线等
- 前台如何分层次显示后台取到的json格式的数据
- 高分相送
- window.document.getElementById("")能不能在ie 5.0和5.5下用?
- "frm.submit;"应该怎么用？
- 运行被禁了，主页地址被禁了，注册表也被禁了，惨！
- 请问高手：父窗口执行子frame的全局函数，与子frame自己执行该函数结果不一样。
- JAVASCRIPT的问题
<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="[email protected]" />
<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>