JavaScript随机定位Div的没有重叠他们

本文介绍了JavaScript随机定位Div的没有重叠他们的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我一直在研究一个随机的概念想法，即在页面上出现6个云，并从数据库中提取随机评论。这部分很容易，但是我发现要确保6层云不相互重叠是非常困难的。我已经仔细研究了碰撞检测，发现在将新的随机定位div放在页面上之前，没有真正合适的方法来检查X或Y范围内的DIV。我的代码下面我知道现在非常混乱。我现在已经检查了最后一个DIV，但是如果DIV 1和DIV 3具有相似的X Y位置，那么这是一个问题。对不起，如果我没有任何意义..这是我的代码和一个jsFiddle $ $ p $ $ $ $文档.ready（函数（） { var counter = 0; // var colide = {}; var px = 0; var py = 0; var cloud = new Array（cloud1，cloud2，cloud3，cloud4，cloud5，cloud6）; var cloudtext = new Array（This is text for cloud 1：D， 这是云2：D的文本，这是云3的文本：D，这是云4的文本：D，这是云5的文本：D，这是云的文本如果（计数器< 6）{计数器++; // 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 posy =（Math.random（）*（$（document）.height（） - 202））。toFixed（）; （（px> posx + 354）||（px< posx_354））{ if（（py> posy + 202）||（py // alert（px +' - '+ posx +'px（temp） - posx（newdiv） - 很好去！'）; 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 然后 newY = newY + prevH 附加< div> 在 newX，newY 保存< div> curX，curY，divW，divH 如果有另一个< div> 2。 I've been working on a random concept idea of having 6 clouds appear on a page with random comments pulled from a database. That part is easy, however I'm finding it extremely difficult to make sure the 6 clouds don't overlap each other. I've looked into Collision Detection a lot and found that there's no real suitable method of checking for a DIV within a range at X or Y before placing the new "randomly positioned" div on the page. I have my code below which I know is extremely messy right now. I currently have it checking the last DIV with reasonable success but if DIV 1 and DIV 3 for example, have similar X Y positions then It's a problem. Sorry If I'm making no sense.. here's my code and a 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 - Link to JSFiddle 解决方案 The algorithm would look something like this; I might have made a mistake thoughGet the document's height and width y = docH, x = docWSubtract the <div>'s height and width, y = y - divH, x = x - divHChoose random co-ordinates curX, curY between 0..x, 0..ynewX = curX, newY = curYFor each previous <div>Call it's info prevX, prevY, prevW, prevHIf prevX < curX then newX = newX + prevWIf prevY < curY then newY = newY + prevHAppend <div> at newX, newYSave <div> info curX, curY, divW, divHIf there is another <div>, go to step 2. 这篇关于JavaScript随机定位Div的没有重叠他们的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！