jQuery: disporre gli elementi in modo casuale

Per disporre gli elementi in modo casuale con jQuery si possono generare degli offset pseudo-casuali con cui posizionare gli elementi. L'unico parametro da tenere presente è però il limite imposto alla generazione dei numeri pseudo-casuali. Vediamo come fare.

Abbiamo questa struttura HTML:


<div id="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
</div>

Con i seguenti stili CSS:


#container {
    width: 500px;
    height: 500px;
}

div.box {
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    background: #ccc;
    border-radius: 50%;
    position: relative;
}​

Possiamo posizionare gli elementi in questo modo:


$('div.box').each(function() {

    var width = 500;
    var height = 500;
    var $div = $(this);

    $div.css({
        top: Math.floor((Math.random() * height) + 1),
        left: Math.floor((Math.random() * width) + 1)
    });

});​

500 è il valore della larghezza e dell'altezza dell'elemento. Ovviamente si tratta di un valore molto elevato come limite per un numero pseudo-casuale, quindi dovreste cercare di trovare un valore intermedio che non generi offset troppo alti.

Potete visionare l'esempio finale in questa pagina.

Torna su