Discussion :

[Matteo53]

Bonjour,
J'ai plusieurs div placées au milieu de ma page en position absolue, et chaque div se superpose sur l'autre avec un léger décalage. J'ai crée une petite animation avec gsap, pendant cette animation je voudrais que toutes ces div se positionnent harmonieusement de façon aléatoire sur la page.
J'ai crée cette fonction que j'appelle dans ma timeline(gsap):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function imgAleat() {
  const windowHeight = window.innerHeight;
  const windowWidth = window.innerWidth;
 
  const divs = document.querySelectorAll(".divImg");
  divs.forEach((div) => { 
    const left = entierAleatoire(0 + div.offsetWidth, windowWidth - div.offsetWidth);
    const top = entierAleatoire(0 + div.offsetHeight, windowHeight - div.offsetHeight);
 
    div.style.left = left + "px";
    div.style.top = top + "px";
 
    console.log(`hauteur : ${windowHeight} largeur: ${windowWidth}
                left : ${left} top: ${top}
    `);
  });
}
 
tl.call(imgAleat);

Tout marche bien mais les divs se chevauchent de façon aléatoire parfois, est ce que il serait possible de laisser une distance entre les divs pour que elle ne se chevauchent pas et de se placer harmonieusement dans la page de façon aléatoire ?
merci pour votre aide

[NoSmoking]

Bonjour,

Tout marche bien mais les divs se chevauchent de façon aléatoire parfois, est ce que il serait possible de laisser une distance entre les divs pour que elle ne se chevauchent pas et de se placer harmonieusement dans la page de façon aléatoire ?

Harmonie et aléatoire sont pratiquement antinomiques

Dans l'absolu il suffit de tester si un rectangle est superposé à un autre, çà c'est simple, et de le déplacer si c'est le cas, çà c'est autre chose, oui mais ...

Mais avant de coder je dirais qu'il t'appartient de bien définir l'algorithme d'espacement qui va fatalement être confronté à divers problèmes, nombre d'éléments à espacer, espace disponible qui va diminuer en fonction du nombre etc ..., que fait-on si on n'y parvient pas.

Il te faudrait peut-être poser ta question sur le Forum Algorithmes et structures de données, ils ont traité, avec brio, Rectangle maximum dans un nuage de points qui se rapproche de ta problématique.

[Matteo53]

Bonsoir
merci beaucoup pour vos conseils. Je vais faire différemment je trouve trop complexe, et surtout il faut tenir compte de la multitude de taille d'écrans.
Bonne soirée