Javascript随机定位Div'；没有重叠

我一直在研究一个随机概念，让6个云出现在一个页面上，并从数据库中随机抽取评论。这一部分很容易，但是我发现要确保这6朵云彩不相互重叠是非常困难的。我已经研究了很多碰撞检测，发现在将新的“随机定位”DIV放在页面上之前，没有真正合适的方法来检查X或Y范围内的DIV。我有我的代码，我知道下面的代码现在非常混乱。我现在已经检查了最后一个DIV，并取得了合理的成功，但是如果DIV 1和DIV 3的X-Y位置相似，那么这就是一个问题。对不起，如果我说不通的话。。这是我的代码和一个JSFIDLE

$(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();

$（文档）.ready（函数（）{
var计数器=0；
//var colide={}；
var-px=0；
var-py=0；
var clouds=新数组（“cloud1”、“cloud2”、“cloud3”、“cloud4”、“cloud5”、“cloud6”）；
var cloudtext=新数组（“这是云1:D的文本”、“这是云2:D的文本”、“这是云3:D的文本”、“这是云4:D的文本”、“这是云5:D的文本”、“这是云6:D的文本”）；
函数makeDiv（）{
如果（计数器<6）{
计数器++；
//var divsize=（（Math.random（）*100）+50）.toFixed（）；
//var color='#'+Math.round（0xffffff*Math.random（））.toString（16）；
$newdiv=$（''+cloudtext[counter-1]+''）.css({
“宽度”：“354px”，
“高度”：“202px”
//“宽度”：divsize+“px”，
//“高度”：divsize+“px”，
//“背景色”：颜色，
});
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（）；
}
如果（（px>posx+354）| |（pxposy+202）| |（py

}))

---

JS Fiddle-

算法看起来像这样；不过我可能犯了个错误

获取文档的高度和宽度y=docH，x=docW

减去

的高度和宽度，y=y-divH，x=x-divH

选择0..x，0..y之间的随机坐标curX，curY

newX=curX，newY=curY

对于前面的每个

叫它info prevX，prevY，prevW，prevH

如果prevX

如果prevY

在newX、newY追加

保存

信息curX、curY、divW、divH

如果还有另一个

，请转至步骤2

---

5下的子步骤应该更像

“如果（curX>prevX-divW&&curXprevY-divH&&curY

@ejegg您添加的项目越多，使用random“选择新”的想法就越糟糕，因此我尝试将其翻译为。真的，但是你仍然只需要移动X和Y重叠的div，如果它只是在现有div的上/下或左/右对齐，就不需要移动它。谢谢大家。我对Javascript还是相当陌生，所以我花了一段时间才开始熟悉它。我将按照该算法的规则重新编写代码，看看我能想出什么