afficher des divs en "tableau"

[loukoum82]

Je ne sais pas du tout où mettre ça, mais ayant galérer à trouver une solution à mon problème - à savoir afficher des DIV en tableau dans un autre DIV ou dans la page - je partage ma fonction JS (les explications sont en dessous):

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
function divToTableau(container,classe,space) {
 var divs = container.getElementsByTagName('div');
 var wDispo =container.offsetWidth;
 var wRestante = wDispo;
 var mleft = space;
 var mtop = space;
 var maxH = mtop;
 for (var i=0;i<divs.length;i++)
  if (divs[i].style.display!='none' && divs[i].className==classe) {
   divs[i].style.position = "absolute";
   if (wRestante<divs[i].offsetWidth+space) {
    mleft = space;
    mtop += maxH+space;
    wRestante = wDispo;
    maxH = space;
   }
 
   divs[i].style.marginLeft = mleft+"px";
   divs[i].style.marginTop = mtop+"px";
   mleft += divs[i].offsetWidth+space;
   wRestante -= divs[i].offsetWidth+space;
   if (divs[i].offsetHeight>maxH) maxH = divs[i].offsetHeight;
 
  }
}

La fonction prend en paramètres :
container : le div ou body ou td ou autres Element DOM de type Block qui va contenir le tableau
classe : La classe des DIVS devant être positionnés en tableau (Car si on ne le précise pas, ça va faire n'importe quoi vu que la fonction getElementsByTagName prend tous les descendants de tous les niveaux)
space : l'espace voulu entre chaque div (histoire que ça ne soit pas tout collé)

Dans la fonction une utilise des propriétés offset donc il faut que container.style.display=""; pour que les valeurs des offsets ne soit pas à 0 !
Et puis il faut que votre container est un width bien défini pour qu'on sache quand revenir à la ligne. Mais sinon ça marche assez bien.

Moi je l'utilise à chaque fois que j'ajoute ou que j'enlève un de mes DIV et ça réorganise parfaitement le tableau.

j'espère que ça sera utile pour certains d'entre vous !

PS: j'oubliais : la variable maxH permet d'adapter la hauteur de la ligne au DIV le plus haut (car vos DIVs n'ont pas besoin d'être de hauteur ou largeur identique)