4
J'ai un titulaire div sur la page où je veux charger de petites images dans une position aléatoire comme un collage avec un remplissage de 10px sur chacun.Générer une position d'élément aléatoire et éviter le chevauchement en JavaScript
Comment puis-je m'assurer que les images ne se chevauchent jamais l'une l'autre ou ne se chevauchent pas? Existe-t-il un plugin ou une fonction que je pourrais utiliser?
Mon code à ce jour:
<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>
vous pouvez les assigner à une grille, puis ils se chargent chacun à une position peu aléatoire dans leur propre cellule réservée/espace ne se chevauchent jamais et restent "aléatoire". Si vous voulez qu'ils soient complètement aléatoires, vous devrez ajouter la position et la taille dans un tableau et calculer pour chaque image s'il n'est pas @ les mêmes coordonnées d'une image précédente. aucune idée si quelque chose comme ça a été mis dans un plugin avant même si – Sander