Colonnes/lignes dynamiques

Question

Vous vous demandez: est-ce que quelqu'un connaît de bons articles expliquant la technique CSS permettant à plusieurs instances d'une classe de descendre la page par rapport aux éléments situés au-dessus? Je ne l'explique pas très bien. Bien que je ne sois pas sûre de vouloir utiliser une technique comme elle, il faut entrer la hauteur par élément via son installation EE.

J'ai fait un petit graphique de ce que j'essaie d'atteindre;

La clé est que j'ai besoin d'une technique robuste pour le faire. Quelque chose où le balisage pourrait être aussi simple que;

<div class="box"> 
    Number 1 
</div> 
<div class="box"> 
    Number 2 
</div> 
<div class="box"> 
    Number 3 
</div> 
<div class="box"> 
    Number 4 
</div> 
<div class="box"> 
    Number 5 
</div> 
... 

Aimerait n'importe quel pointeur dans la bonne direction.

Answer 1

Elle ne définit pas de hauteur pour ces boîtes. JQuery positionne dynamiquement chaque boîte et pour autant que je sache, c'est la seule façon d'obtenir cet effet avec le balisage que vous décrivez dans votre message. Si vous ne voulez pas utiliser une solution javascript, la seule façon de le faire est d'avoir des colonnes wrapper, mais cela changerait radicalement votre balisage.

<div class="container"> 
    <div class="box">number 1</div> 
    <div class="box">number 2</div> 
    <div class="box">number 3</div> 
</div> 
<div class="container"> 
    <div class="box">number 4</div> 
    <div class="box">number 5</div> 
    <div class="box">number 6</div> 
</div> 
<div class="container"> 
    <div class="box">number 7</div> 
    <div class="box">number 8</div> 
    <div class="box">number 9</div> 
</div> 

Answer 2

Elle y parvient en positionnant les boîtes absolument.

Mais vous pouvez le réaliser avec des css très simples, en supposant que vous pouvez contrôler l'ordre dans lequel les éléments apparaissent.
Vous devez les grouper en colonnes (et non en lignes comme d'habitude), mais cela fonctionne comme un charme.

Utilisez HTML comme ceci:

<span class="column"> 
    <div class="box">number 1<br />with two lines</div> 
    <div class="box">number 4</div> 
    <div class="box">number 7<br />with two lines</div> 
</span> 
<span class="column"> 
    <div class="box">number 2</div> 
    <div class="box">number 5<br />with two lines<br />or even three<br />or four!</div> 
    <div class="box">number 8</div> 
</span> 
<span class="column"> 
    <div class="box">number 3</div> 
    <div class="box">number 6</div> 
    <div class="box">number 9</div> 
</span> 

Et CSS comme ceci:

.column { 
    clear: left; 
    width: 25%; 
    display: inline-block; 
    vertical-align: top; 
} 
.box { 
    border: solid 1px blue; 
} 

test sur JSFiddle.net.
Utilisez span pour les colonnes, car IE7 n'accepte pas display: inline-block; pour les éléments qui sont naturellement des éléments de bloc. (Meh.)

Answer 3

Comme d'autres l'ont fait remarquer, en utilisant uniquement CSS, vous pouvez regrouper les boîtes dans des colonnes. Malheureusement, cela ne sera pas très bien si votre contenu est dynamique et que vous ne connaissez pas la hauteur de toutes les cases (vos colonnes pourraient avoir des longueurs radicalement différentes). Si vous voulez calculer les hauteurs des boites afin de bien les agencer, vous allez devoir utiliser Javascript. Il n'y a certainement rien de mal à utiliser Javascript - c'est le bon outil pour ce travail! En ce qui concerne l'implémentation, la logique serait quelque chose comme ceci: commencez par ajouter les 4 premières cases, une en haut de chaque colonne. Ensuite, gardez une trace de la hauteur totale de chaque colonne en utilisant la propriété clientHeight de Javascript, et pour chaque nouvelle boîte que vous voulez ajouter; il suffit de l'ajouter à la fin de la colonne la plus courte avec appendChild().

Si vous décidez d'utiliser jQuery, je peux vous recommander un plugin appelé jQuery Masonry.