Genera la posizione casuale degli elementi e previene la sovrapposizione in JavaScript

Question

Ho un div titolare sulla pagina in cui voglio caricare piccole immagini in posizione casuale come collage con imbottitura di 10px su ciascuna.

Come posso assicurarmi che le immagini non si sovrappongano mai l'una all'altra o al div titolare?C'è un plugin o una funzione che potrei usare?

Il mio codice finora:

<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>

Answer 1

Credo che non v'è alcun plugin. Io implementare questa Sander come suggerito da fare griglia div predefinito e solo il caricamento di immagini casuali a tali div. E 'più facile e più veloce di calcolo immagine dimenssions / posizioni e fa più o meno lo stesso lavoro. Non casuale, ma visivamente sembra buona:)

Answer 2

Memorizza le coordinate selezionate in un array, in modo da poter confrontare le coordinate di ogni nuova immagine posizionata con quella precedente.

Se le coordinate che hai scelto si sovrappongono a un'immagine precedente, scegli nuove coordinate.Limita il numero di tentativi in ​​modo che se non riesci a posizionare un'immagine con diciamo 1000 tentativi, ricominci da capo con la prima immagine.

Answer 3

Ci scusiamo per scavare un vecchio post, ma di recente mi sono imbattuto in un problema simile e ci ho messo un po 'di tempo per trovare la soluzione ideale - che ora voluto condividere. Ci sono degli alberi modi per raggiungere questo.

---

1) Il modo più duro

Se vuoi per la sua attuazione da soli, si avrà probabilmente ottenere il risultato migliore si adattano alle vostre esigenze. Si richiede un certo tempo e un sacco di test, ma in realtà non è così difficile da attuare una tale funzione sul proprio. È possibile utilizzare il Math.floor(Math.random() * Max) + Min casuale funzioni per calcolare una posizione casuale nell'elemento padre. Dopo aver posizionato il primo elemento, è necessario memorizzare le coordinate del elemento, in una matrice, per esempio. Ora prima di mostrare l'elemento successivo è possibile utilizzare la matrice per controllare se ci sono sovrapposizioni - in caso affermativo, si può solo calcolare una nuova posizione. non è il modo più efficace per fare questo, probabilmente, ma che funzionerà abbastanza bene per non così grande quantità di elementi. Ma sono abbastanza sicuro che se implementato questo, non è anche troppo difficile da ottimizzare l'algoritmo in modo da renderlo più efficiente.

2) Il modo in cui soluzione

Il secondo modo per ottenere questo risultato è modi più facile quindi il primo modo, ma anche non flessibile. avresti quindi bisogno di utilizzare alcuni layout predefinito - una specie di griglia. Così lascia supporre che si dispone di un contenitore con 100 grid-blocchi, in modo da 100 elementi per mettere i vostri elementi in. Si potrebbe ora solo calcolare un numero casuale compreso tra 1 e 100 e aggiungere il vostro elemento per la griglia-contenitore. E 'abbastanza facile da evitare sovrapposizioni, ma questo modo di fare potrebbe non sempre soddisfare le vostre esigenze.

3) Il modo più semplice Se cercate un po 'di tempo, ma non c'era un solo plugin che adatta alle mie esigenze. Così ho creato uno per conto mio, che ho pubblicato e che può essere utilizzato gratuitamente. Lo si può trovare sotto manuelmaurer.at/randposplugin.php . E 'abbastanza flessibile in modo Penso che questo sarebbe il modo più semplice per raggiungere i vostri obiettivi.