jQuery的隨機頂/左定位前DOM

我想要獲得任意數量的頂點/左側定位的元素（跨度），將至少距離對方50個像素，以確保一個乾淨的分散。我現在所擁有的代碼如下：jQuery的隨機頂/左定位前DOM

function PositionOK(x, y) { 
    axisarray.sort(function (a, b) { 
     return a - b 
    }); 
    for (var i in axisarray) { 
     var pos = axisarray[i]; 
     if (Math.abs(x - pos.x) < 50) { 
      return false; 
     } 
     if (Math.abs(y - pos.y) < 50) { 
      return false; 
     } 
    } 
    return true; 
} 
for (var xy = 0; xy < termArray.length * 2; xy++) { 
    var x = Math.floor(Math.random() * 500); 
    var y = Math.floor(Math.random() * 800); 
    if (PositionOK(x, y)) { 
     axisarray.push({ 
      'xaxis': x, 
      'yaxis': y 
     }); 
    } else axisarray.push({ 
     'xaxis': x + 50, 
     'yaxis': y + 50 
    }); 
}

輸出示例： enter image description here

正如你可以看到，它們的分佈並不均勻。有些浮在另一個上面，當它們應該分散至少50px。任何建議/解決方案？

來源

2014-04-01 pedrum golriz

不，你需要這樣的條款12： 'x軸'：X + 50 + '像素'？ – pj013

我看到的一個潛在問題是，雖然座標全部相距50px，但這並不意味着每個塊的邊緣距離每個其他邊緣都是50px。由於它只是50px的元素的起源，而不是元素的實際邊框，因此您會看到重疊。我不知道我會如何解決這個問題，但我很確定這是你的問題。 – UpQuark

你必須考慮元素的寬度和高度。 – kei

嗯，我無法讓它像素完美，但這是我能想出的最佳解決方案。讓我知道如果有什麼東西，使我更清楚：

axisarray = []; 
var x, y; 
x = y = 0; 
for (var xy = 0; xy < termArray.length * 2; xy++) { 
    function genxy(shuffle) { 

     if (shuffle) { 
      axisarray = axisarray.sort(function (a, b) { 
       return a.xaxis > b.xaxis ? 1 : -1; 
      }); 
      x = Math.abs(Math.floor(Math.random() * (axisarray[xy - 1].xaxis + 50) + axisarray[xy - 1].xaxis)); 
      axisarray = axisarray.sort(function (a, b) { 
       return a.yaxis > b.yaxis ? 1 : -1; 
      }); 
      y = Math.abs(Math.floor(Math.random() * (axisarray[xy - 1].yaxis + 50) + axisarray[xy - 1].yaxis)); 
     } else { 
      axisarray = axisarray.sort(function (a, b) { 
       return a.xaxis > b.xaxis ? 1 : -1; 
      }); 
      x = Math.floor(Math.random() * x + 100) + 50; 
      axisarray = axisarray.sort(function (a, b) { 
       return a.yaxis > b.yaxis ? 1 : -1; 
      }); 
      y = Math.floor(Math.random() * y + 100) + 50; 
     } 
    } 
    if (xy > 0) { 
     genxy(true); 
    } else { 
     x = Math.floor(Math.random() * 50) + 50; 
     y = Math.floor(Math.random() * 50) + 50; 
    } 
    while (x > 800 || y > 500 || x < 0 || y < 0) { 
     genxy(false); 
    } 
    axisarray.push({ 
     'xaxis': x, 
     'yaxis': y 
    }); 
}

示例如下輸出： enter image description here 有仍然有一些輕微的溢出，但我不能做任何更好

來源

2014-04-02 21:15:02

順序基礎的解決方案（最多支持直至與CSS我一塌糊塗）

axisarray = []; 
var x, y; 
x = y = 0; 
for (var xy = 0; xy < termArray.length * 2; xy++) { 
    function genxy() { 
     if (xy % 3 == 0) { 
      var temp = Math.floor((Math.random() * 100) + 60); 
      y = axisarray[xy - 1].yaxis + temp; 
      x = Math.floor((Math.random() * 125) + 100); 
     } else { 
      y = axisarray[xy - 1].yaxis; 
      x = axisarray[xy - 1].xaxis + 300; 
     } 
    } 
    if (xy > 0 && xy <= 12) { 
     genxy(); 
    } else if (xy > 12) { 
     x = Math.floor((Math.random() * 125) + 100); 
     y = Math.floor((Math.random() * 100) + 75); 
    } else { 
     x = 100; 
     y = 50; 
    } 
    if (xy == termArray.length * 2 - 1) axisarray.sort(function (a, b) { 
     return a - b 
    }); 
    axisarray.push({ 
     'xaxis': x, 
     'yaxis': y 
    }); 
}

來源

2014-04-03 14:36:12

jQuery的隨機頂/左定位前DOM

回答

相關問題