Positionner les Divs de façon semi-aléatoire, sans chevauchement

Question

J'ai une page qui contient des DIV contenant des phrases courtes (un ou deux mots) de tailles de police différentes, qui doivent être positionnées de gauche à droite selon un paramètre numérique, et verticalement afin de ne pas se chevaucher.

Il est comme un nuage de tags, mais il y a des informations contenues dans l'axe des y et (« sang-froid » dans ce cas - http://cool-wall.appspot.com)

Comment dois-je mettre ces derniers dehors? J'utilise actuellement une série très désordonnée de DIVs comme ceci:

<div style="position:absolute; top:150px;left:10px;right:10px;bottom:10px"> 

<!-- then, repeated, with different top, left and font-size values --> 

    <div style="align:center; margin:0; border:none; padding:0; float:left; visibility:visible; position:absolute; top:21%; left:56%; font-size:11px"> 
    <div style="margin-top:0%; margin-right:50%; margin-bottom:0%; margin-left:-50%;"> 
     <a href="foo"><span style="display:inline"> &larr; </span></a> 
     <a href="bar"><span style="display:inline"> Buzz </span></a> 
     <span style="display:inline"> &rarr; </span> 
    </div> 
    </div> 

    <!-- of course, followed by a close div --> 

</div> 

J'utilise une feuille de style pour extraire certains de ces styles, et je me rends compte qu'il est assez pauvre CSS (et HTML) ... mais c'était tout ce que je pouvais bidouiller ensemble pour faire (presque) ce que je voulais faire. Le principal problème avec ce qui précède (en plus d'être déroutant) est que je ne peux pas définir le positionnement de sorte qu'il ne se chevauche pas, car je ne sais pas quelle sera la taille de la police ni comment elle s'affichera à l'écran.

Content d'utiliser JavaScript pour l'obtenir correctement. Mais je ne sais pas par où commencer. Des conseils?

Answer 1

La valeur x est définie sur chacun, vous voulez être aussi haut sur la page que possible (le plus bas y) car il peut aller sans chevauchement Pas trop mal:

1) Rendu le conteneur - position: relative; Rendez chaque élément à l'intérieur du conteneur avec "position: absolute, top: 0, left: -1000;" - dessinez-les tous hors de l'écran.

2) Un par un, déplacez l'élément vers le x-coorinate nécessaire et y = 0; Vérifiez avec tous les précédents éléments de rendu pour voir si elle entre en collision, si elle le fait, le déplacer vers le bas un pixel jusqu'à ce qu'il ne pas entrer en collision:

var regions = []; 
for(var i = 0; i < items.length; i++){ 
    var item = items[i]; 

    item.style.x = getX(item); // however you get this... 
    var region = YAHOO.util.Dom.getRegion(item); 
    var startingTop = region.top; 
    for(var iReg = 0; iReg < regions.length; iReg++){ 
    var existingRegion = regions[iRegion]; 
    while(region.intersect(existingRegion)){ 
     region.top++; 
     region.bottom++; 
    } 
    item.style.y = (region.top - startingTop) + 'px'; 
    } 
} 

Il est important de mettre à jour juste la région et ne se déplace pas en fait le nœud dom 1px à la fois pour des raisons de performance.

Placez les éléments les plus importants en premier et ils afficheront avec plus de priorité que les éléments inférieurs.

Dernière question

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 Questions connexes

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.