生成隨機元素位置，並防止在JavaScript中重疊

我有一個持有人div在頁面上，我想隨機位置加載小圖像作爲每個10px填充拼貼。生成隨機元素位置，並防止在JavaScript中重疊

我怎樣才能確保圖像不會互相重疊或持有人div？有沒有我可以使用的插件或函數？

到目前爲止我的代碼：

<script src="jquery-1.3.2.min.js" type="text/javascript"></script> 

<script type="text/javascript"> 
$(document).ready(function(){ 
$("#my_canvas img").each(
function(intIndex) { 

var l = Math.floor(Math.random() * $("#my_canvas").width()); 
var t = Math.floor(Math.random() * $("#my_canvas").height()); 

$(this).css("left", l); 
$(this).css("top", t); 

$(this).bind(
    "click", 
     function() { 
      alert("l=" + l + " t=" + t); 
     } 
    ); 

} 

);

}）;

<style type="text/css"> 
    #my_canvas 
    { 
     background: #eee; 
     border: black 1px solid; 
     width: 800px; 
     height: 400px; 
    } 
    #my_canvas img 
    { 
     padding: 10px; 
     position:absolute; 
    } 
</style> 

<div id="my_canvas"> 
    <img src="images/1.jpg" /> 
    <img src="images/9.jpg" /> 
    <img src="images/2.jpg" /> 
    <img src="images/3.jpg" /> 
    <img src="images/4.jpg" /> 
    <img src="images/5.jpg" /> 
    <img src="images/6.jpg" /> 
    <img src="images/7.jpg" /> 
    <img src="images/8.jpg" /> 
</div>

來源

2009-08-17 jpkeisala

它取決於你想要它們是多麼隨機...... 你可以將它們分配給一個網格，然後它們每個都加載在它們自己的保留單元/空間內的一個隨機位置上，永遠不會重疊並且仍然是「隨機的」。如果您希望它們完全隨機，您需要將位置和大小添加到數組中，併爲每個圖像計算，如果他不是先前圖像的相同座標。不知道如果像這樣的東西已被放入插件之前雖然 – Sander 2009-08-17 09:13:09

我猜這裏沒有插件。我將通過製作預定義的div網格並將隨機圖像加載到這些div來實現這一點。它比計算圖像尺寸/位置更容易，更快速，並且完成幾乎相同的工作。不是隨機的，但視覺上看起來不錯:)

來源

2009-08-18 08:23:16 jpkeisala

存儲在數組中拾取座標，這樣就可以比較你將較上日每一個新形象的座標。

如果您選取的座標與先前的圖像重疊，請選取新的座標。限制嘗試的次數，以便如果您不能放置圖片說1000次嘗試，您重新開始第一個圖像。

來源

2009-08-17 09:09:33 Guffa

對不起挖掘舊帖子，但我最近遇到了類似的問題，我花了一些時間來找到完美的解決方案 - 我現在想分享。有樹方法來實現這一點。

1）硬辦法

如果你想實現它你自己，你可能會達到的效果最好的適合您的需求。它確實需要一些時間和大量的測試，但實際上你自己實現這樣一個功能並不難。您可以使用隨機函數Math.floor(Math.random() * Max) + Min來計算父元素中的隨機位置。在定位第一個元素之後，您需要將元素的座標存儲在數組中。現在，在顯示下一個元素之前，您可以使用該數組檢查是否有重疊 - 如果是這樣，則可以計算新的位置。這可能不是最有效的方法，但它可以適用於沒有那麼多元素的情況。但是我非常肯定，如果你實現了這個目標，爲了提高效率，優化算法也不是很難。

2）解決方法方式

實現這一目標的第二種方式是更容易的方式，則第一種方式，但還不夠靈活。因此你需要使用一些預定義的佈局 - 某種網格。所以我們假設你有一個有100個網格塊的容器，所以有100個元素可以放入你的元素。現在你可以計算一個1到100之間的隨機數並將你的元素附加到網格容器中。防止重疊很容易，但這種做法可能並不總能滿足您的需求。

3）最簡單的方法 如果搜索一段時間，但沒有一個適合我的需求的插件。所以我自己創建了一個，我發佈了它，並且可以免費使用。你可以在manuelmaurer.at/randposplugin.php找到它。它非常靈活，所以我認爲這將是您實現目標的最簡單方法。

來源

2017-04-11 11:57:25

生成隨機元素位置，並防止在JavaScript中重疊

回答

相關問題