Je vous avais parlé récemment de FlexImages, pour placer les images de telle sorte à faire un mur d’images qui n’ait pas de lignes plus grandes que les autres.

Ce que ces scripts font, c’est un calcul d’optimisation de la disposition des images, pour que chaque ligne fasse la bonne hauteur et que l’aspect des images ne soient pas trop déformé.

C’est génial, mais ça reste un brin lourd quand on a 1200 images.

On peut faire quelque chose de relativement propre simplement en CSS aussi, avec flex.

Démonstration là : http://lehollandaisvolant.net/tout/examples/tiles/

— 15 lignes de CSS
— pas de JS
— pas de hack
— supporté partout

Ce n’est pas aussi parfait que les méthodes en JS, mais c’est largement plus léger et simple à mettre ne place, non ?

On peut optimiser un petit peu avec du JS : calculer l’espace entre chaque image d’une ligne, et si il y a trop de blanc, on élargit un peu l’image pour supprimer l’espace blanc (ça va déformer l’image, mais pas assez pour que ça se voit ou que ce soit désagréable) ; et ceci pour toutes les lignes (ce qui n’est pas évident non plus, car le retour à la ligne est automatique.

ÉDIT : voilà voilà, 20 lignes de JS très basiques et c’est parfait : http://lehollandaisvolant.net/tout/examples/tiles/index2.html

ÉDIT 2 : j’ai mis tout ça sur Github : https://github.com/timovn/jscss-tiles

ÉDIT 3 : J’ai amélioré un peu encore tout ça : il y a un petit test pour savoir si ça vaut le coup de réduire les images d’une ligne pour afficher la suivant ou s’il vaut mieux agrandir les images et laisser la suivante sur la ligne d’après. Sur cette capture on voit en vert les images qui sont élargies et en rouge celles qui sont rétrécies. C’est fabuleux.
— (permalink)