Générer de l'aléatoire de la position de l'élément et d'éviter les chevauchements en JavaScript

J'ai un titulaire de la div sur la page où je veux charger des petites images sur la position aléatoire comme un collage avec 10px rembourrage sur chaque.

Comment faire en sorte que les images ne se chevauchent les uns les autres ou titulaire de la div?
Est-il un plugin ou une fonction que je pourrais utiliser?

Mon code pour l'instant:

<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>
il dépend du hasard que vous voulez... vous pourriez assigner à une grille, puis ils ont chacun en charge un peu aléatoire de la position à l'intérieur de leurs propres réservés/cellule de l'espace ne doivent pas se chevaucher et être encore "aléatoire". si vous voulez être totalement aléatoire, vous aurez besoin d'ajouter la position et la taille dans un tableau et calculer pour chaque image, si il n'est pas @ la même coords d'une image précédente. aucune idée si quelque chose comme cela a été mis dans un plugin avant que

OriginalL'auteur jpkeisala | 2009-08-17

  1. 3

    Magasin choisi coordonnées dans un tableau, de sorte que vous pouvez comparer les coordonnées de chaque nouvelle image vous place contre la précédente.

    Si les coordonnées que vous avez choisi chevauche une image précédente, chercher de nouvelles coordonnées. Limiter le nombre d'essais, de sorte que si vous ne pouvez pas placer une image à dire 1000 tente, vous commencez avec la première image.

    OriginalL'auteur Guffa

  2. 2

    Désolé pour les déterrer un vieux post, mais j'ai récemment rencontré un problème similaire et il m'a fallu un certain temps pour trouver la solution parfaite - que je voulais partager. Il y a l'arbre des moyens pour y parvenir.

    1) La dure

    Si vous souhaitez la mettre en œuvre sur votre propre, vous aurez probablement à obtenir le résultat le mieux adapté à vos besoins. Cela requiert du temps et beaucoup de tests mais en fait c'est pas que difficile à mettre en œuvre une telle fonctionnalité sur votre propre. Vous pouvez utiliser le Hasard-Fonctions Math.floor(Math.random() * Max) + Min pour calculer une position aléatoire dans l'élément parent. Après le positionnement de l'élément premier, vous avez besoin de stocker les coordonnées de l'élément, dans un tableau par exemple. Maintenant, avant de vous montrer le prochain élément, vous pouvez utiliser le tableau pour vérifier si il y a des recoupements - si oui, vous pouvez simplement calculer une nouvelle position. N'est-ce pas le moyen le plus efficace pour ce faire, sans doute, mais cela marche assez bien pour pas si de grandes quantités d'éléments. Mais je suis sûr que si vous avez mis en œuvre cette, il n'est également pas trop difficile pour optimiser votre algorithme afin de le rendre plus efficace.

    2) La solution de contournement façon

    La deuxième façon d'y parvenir est des façons plus facile que la première, mais pas aussi flexible. Par conséquent, vous devez utiliser quelques modes de mise en page - une sorte de grille. Donc, supposons que vous avez un conteneur avec 100 grille-blocs, de sorte que 100 éléments à mettre vos éléments. Vous pourriez maintenant calculer un nombre aléatoire entre 1 et 100 et ajouter votre élément de la grille-conteneur. Il est très facile d'éviter les chevauchements, mais cette manière de faire peut ne pas toujours correspondre à vos besoins.

    3) le moyen Le plus facile
    Si cherché un bon moment, mais il n'y avait pas un seul plugin qui correspondent à mes besoins. J'ai donc créé un sur le mien, que j'ai publié et qui peut être utilisé gratuitement. Vous pouvez le trouver sous manuelmaurer.at/randposplugin.php. Il est assez souple donc je pense que ce serait le moyen le plus facile pour vous d'atteindre vos objectifs.

    OriginalL'auteur Manuel Maurer

  3. 0

    Je suppose qu'il n'y a pas de plugin. Je vais mettre en œuvre la présente comme Sander a suggéré d'en faire prédéfinis div grille et juste le chargement des images aléatoires de ces divs. Il est plus facile et plus rapide que le calcul de l'image dimenssions/les positions et fait à peu près le même travail. Pas aléatoire mais visuellement semble bon 🙂

    OriginalL'auteur jpkeisala