把div放在随机没有覆盖的地方

Question

我想随意在窗户上放置div而没有覆盖。 therfore即时 创造一些阵列，

widthArray，heightArray，XP = xPosition位置，YP = yPosition，XPRT = rightCornerX（XPOS +宽度） yPRT = rightCornerY等

因此Im给所有这些一个随机的位置，我计算所有的角点。 之后，我计算内两个循环，如果其中一个div的角落之一是 另一个div，如果这是真的，即时给予一个新的随机位置，只要它 不与另一个div叠加。

这里是代码：

for(var i = 0; i<xP.length; i++) { 
      for(var k = 0; k<xP.length; k++) { 

       if(i == k) { 
        //alert(Math.random()); 
       } else { 

        while((xP[i]>xP[k] && yP[i]>yP[k] && xP[i]<xPRB[k] && yP[i]<yPRB[k]) || (xPRT[i]<xPRT[k] && yPRT[i]>yPRT[k] && xPRT[i]>xP[k] && yPRT[i]<yPRB[k]) || (xPRB[i]<xPRB[k] && yPRB[i]<yPRB[k] && xPRB[i]>xP[k] && yPRB[i]>yP[i]) || (xPLB[i]>xPLB[k] && yPLB[i]<yPLB[k] && xPLB[i]<xPRB[k] && yPLB[i]>yP[k])) { 
         //alert("i: "+i+" k: "+k+" xP: "+xP[i]+" > xP2: "+xP[k]+" & yP: "+yP[i]+" > yP2: "+yP[k]); 
         xP[i] = GetRandom(0, window.innerWidth - widthArray[i]-2); 
         yP[i] = GetRandom(0, window.innerHeight - heightArray[i]-2); 

         xPRT[i] = xP[i] + widthArray[i]; 
         yPRT[i] = yP[i]; 

         xPRB[i] = xP[i]+ widthArray[i]; 
         yPRB[i] = yP[i]+ heightArray[i]; 

         xPLB[i] = xP[i]; 
         yPLB[i] = yP[i] + heightArray[i]; 
         count++; 

        }; 
       } 
      } 
     } 

，即时通讯定位后创建的瓦尔的div。 但仍有覆盖divs。我的逻辑有问题吗？ 是不是写得不对？

感谢您的帮助和抱歉不好英语:)

Answer 1

我认为，如果你检查DIV碰撞，你都将它们添加到窗口算法将运行得更快。不是随机调整它们，然后检查是否有任何碰撞，随机计算每个DIV的位置并在添加之前检查该位置是否发生碰撞。如果是，重新计算一个新的位置并再次检查。我认为这将大O从N^2减少到N * log（N）。

编辑 - 下面是一些示例代码：

function Rect(x, y, w, h) 
{ 
    this.x = x; 
    this.y = y; 
    this.w = w; 
    this.h = h; 

    this.hitTest = function(x, y) 
    { 
    return(x >= this.x && x <= this.x + this.width && 
      y >= this.y && y <= this.t + this.height); 
    } 
} 

var numDivs = 10; 
var divList = new Array(); 

for(var i = 0 ; i < numDivs ; i++) 
{ 
    var doesOverlap = false; 
    do 
    { 
    divList[i] = new Rect(Math.random() * (window.innerWidth - 50), Math.random() * (window.innherHeight - 50), 50, 50); 
    for(var y = 0 ; y < i && !doesOverlap ; y++) 
    { 
     doesOverlap |= divList[y].hitTest(divList[i].x, divList[i].y); 
     doesOverlap |= divList[y].hitTest(divList[i].x + divList[i].width, divList[i].y); 
     doesOverlap |= divList[y].hitTest(divList[i].x, divList[i].y + divList[i].height); 
     doesOverlap |= divList[y].hitTest(divList[i].x + divList[i].width, divList[i].y + divList[i].height); 
    } 
    } 
    while(doesOverlap); 

    // No colision, add div 
} 

我没有的正确性测试它，只是写它从我的头顶。希望它会给你一个想法，你错了什么。