Javascript随机定位Div's而不重叠
Javascript Randomly Positioned Div's without overlapping them
我一直在研究一个随机概念,让6个云出现在一个页面上,并从数据库中提取随机注释。这部分很容易,但我发现要确保这6朵云不会重叠是非常困难的。我研究了很多碰撞检测,发现在将新的"随机定位"DIV放置在页面上之前,没有真正合适的方法来检查X或Y范围内的DIV。我有我的代码,我知道下面的代码现在非常混乱。我目前已经成功地检查了最后一个DIV,但如果例如DIV 1和DIV 3有相似的XY位置,那么这就是一个问题。对不起,如果我说不通的话。。这是我的代码和jsFiddle
$(document).ready(function () {
var counter = 0;
//var colide = {};
var px = 0;
var py = 0;
var clouds = new Array("cloud1", "cloud2", "cloud3", "cloud4", "cloud5", "cloud6");
var cloudtext = new Array("This is text for cloud 1 :D", "This is text for cloud 2 :D", "This is text for cloud 3 :D", "This is text for cloud 4 :D", "This is text for cloud 5 :D", "This is text for cloud 6 :D");
function makeDiv() {
if (counter < 6) {
counter++;
//var divsize = ((Math.random() * 100) + 50).toFixed();
//var color = '#' + Math.round(0xffffff * Math.random()).toString(16);
$newdiv = $('<div class="' + clouds[counter - 1] + '">' + cloudtext[counter - 1] + '<div/>').css({
'width': '354px',
'height': '202px'
//'width': divsize + 'px',
//'height': divsize + 'px',
//'background-color': color,
});
var posx = (Math.random() * ($(document).width() - 354)).toFixed();
var posy = (Math.random() * ($(document).height() - 202)).toFixed();
while (posy < 180) {
posy = (Math.random() * ($(document).height() - 202)).toFixed();
}
if ((px > posx + 354) || (px < posx - 354)) {
if ((py > posy + 202) || (py < posy - 202)) {
//alert(px + ' - ' + posx + ' px(temp) - posx(newdiv) - good to go!');
py = posy;
px = posx;
$newdiv.css({
'position': 'absolute',
'left': posx + 'px',
'top': posy + 'px',
'display': 'none',
'background-image': 'url(http://www.demixgaming.co.uk/cloud/images/Cloud.png)',
'text-align': 'center',
'line-height': '202px',
'color': '#000'
}).appendTo('body').fadeIn(150).delay(300, function () {
makeDiv();
});
} else {
counter--;
px = posx;
py = posy;
makeDiv();
}
} else {
counter--;
px = posx;
py = posy;
makeDiv();
};
}
}
makeDiv();
});
JS Fiddle-链接到JSFiddle
算法看起来像这样;我可能犯了一个错误,尽管
- 获取文档的高度和宽度y=docH,x=docW
- 减去
<div>
的高度和宽度,y=y-divH,x=x-divH - 在0..x,0..y之间选择随机坐标curX,curY
- newX=curX,newY=curY
- 对于之前的每个
<div>
- 称之为信息prevX,prevY,prevW,prevH
- 如果prevX<curX然后newX=newX+prevW
- 如果prevY<curY然后newY=newY+prevH
- 在newX,newY处附加
<div>
- 保存
<div>
信息curX,curY,divW,divH - 如果存在另一个
<div>
,请转至步骤2
相关文章:
- HighCharts长标题文本在某些元素上重叠
- $(document).height()在刷新时随机化值(Safari 5.1.10)
- 使用当前日期生成随机id
- 如何检测重叠元素下的单击
- 从a-z中随机选择一个字母
- RequireJ无法随机加载脚本
- 单击按钮时显示随机字符串
- 停止较大单词的重叠
- Ajax更新面板随机错误'PRM_MissingPanel'
- 随机定位图像,没有重叠
- 随机播放声音重叠
- Javascript随机定位Div's而不重叠
- 生成不重叠的随机框.Javascript
- Div无重叠随机定位
- 如何使用Angular防止随机定位的图像重叠
- Javascript:防止随机大小的图像重叠
- 从数据库随机调用图库图像,每隔一段时间重叠
- 定位多个随机大小、绝对定位的元素,使它们不会;t重叠
- 随机算法&有效地放置100个圆圈,没有任何重叠
- 算法不使随机放置的对象重叠