Generar posición elemento aleatorio y evitar la superposición en JavaScript

Question

Tengo un div titular en la página donde quiero cargar pequeñas imágenes en la posición al azar como un collage con relleno de 10px en cada uno.

¿Cómo puedo estar seguro de que las imágenes no se solapan entre sí o titular div? ¿Existe un plugin o función que podría utilizar?

Mi código hasta ahora:

<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

Creo que no hay ningún plugin. Voy a poner en práctica este Sander como lo sugiere hacer rejilla div predefinido y acaba de cargar imágenes al azar a los divs. Es más fácil y más rápido que el cálculo de imagen dimenssions / posiciones y hace más o menos el mismo trabajo. No al azar pero visualmente se ve bien:)

Answer 2

almacenar las coordenadas recogido en una matriz, de manera que se pueden comparar las coordenadas de cada nueva imagen que coloque en contra de la anterior.

Si las coordenadas que eligió se superpone una imagen anterior, recoger nuevas coordenadas. Limitar el número de intentos de modo que si no se puede colocar una imagen con decir 1000 intentos, empezar de nuevo con la primera imagen.

Answer 3

Lo siento por la excavación de un antiguo puesto, pero recientemente me encontré con un problema similar y me tomó algún tiempo para encontrar la solución perfecta - que ahora quería compartir. Hay maneras de árboles para lograr este objetivo.

---

1) de la manera difícil

Si desea aplicar por su cuenta, es probable que lograr el resultado ajuste mejor a sus necesidades. Esto requiere algo de tiempo y una gran cantidad de pruebas, pero en realidad no es tan difícil de implementar esta característica por su cuenta. Se puede utilizar el Math.floor(Math.random() * Max) + Min azar-Funciones para calcular una posición cualquiera del elemento padre. Después de colocar el primer elemento, es necesario almacenar las coordenadas del elemento, en una matriz, por ejemplo. Ahora antes de mostrar el siguiente elemento puede utilizar la matriz para comprobar si existen superposiciones - si es así, sólo se puede calcular una nueva posición. No es la forma más eficiente de hacer esto, probablemente, pero que va a funcionar bastante bien para no tan grandes cantidades de elementos. Pero estoy bastante seguro de que si ha implementado esto, tampoco es demasiado difícil para optimizar su algoritmo con el fin de hacerlo más eficiente.

2) La forma solución

La segunda manera de lograr esto es maneras más fácil que la primera forma, pero tampoco es tan flexible. Por lo tanto, que había necesidad de utilizar algún diseño predefinido - una especie de rejilla. Así que supongamos que usted tiene un recipiente con rejilla 100-bloques, por lo que 100 elementos para poner los elementos en. Ahora puede simplemente calcular un número aleatorio entre 1 y 100 y anexar el elemento a la red contenedor. Es muy fácil de evitar solapamientos, pero esta forma de hacer que no siempre puede satisfacer sus necesidades.

3) La forma más fácil Si han buscado bastante tiempo, pero no había ni un solo plug-in que se ajustan a mis necesidades. Así que creé uno por mi cuenta, que publiqué y que se puede utilizar de forma gratuita. Puede encontrarlo bajo manuelmaurer.at/randposplugin.php . Es bastante flexible, así que creo que ésta sería la forma más fácil para que usted pueda alcanzar sus objetivos.