Des tuiles

Masonry est un script qui permet d’afficher des éléments sur plusieurs colonnes en préservant un ordre de lecteur horizontal. Le résultat est similaire à celui du site Pinterest.
pinterst

À l’heure actuelle Flexbox et les autres techniques ne permettent pas cette mise en page, on peut tricher avec des colonnes CSS mais l’ordre sera comme la lecture sur papier (le 2e élément est sous le 1er).
Dans un futur proche grid (grid sur css‐tricks) devrait apporter un début de solution.
En attendant, il faudra passer par du JavaScript en utilisant le script suivant : http://masonry.desandro.com/.

Comment ça marche ?

Une fois le html chargé, le script calcule toutes les hauteurs des éléments puis replace les éléments avec des coordonnées x/y (position:absolute).
Un problème a souvent lieu sur les images sans attribut width et height car le script est généralement lancé avant de connaitre la taille des images, la solution est fournie sur le site.

See the Pen Masonry – imagesLoaded progress, vanilla JS by David DeSandro (@desandro) on CodePen.0

Si vous devez utiliser Masonry pour la première fois, il faudra partir d’un exemple et faire évoluer celui‐ci petit à petit.