Dans ce tutoriel je vous propose un exercice pour pratique le code JavaScript côté navigateur. L'objectif est de créer une disposition en ligne pour un album photo. Le problème est ici que nos images n'ont pas toute le même format et on cherchera à remplir chaque ligne.
Pour la structure de base nous allons choisir d'avoir un élément personnalisé (ici <photos-grid>) qui contiendra en enfant des éléments de type <img/>.
Approche
La première étape consistera à créer un tableau permettant de lister les images qui composera notre galerie d'image. Pour cela on pourra partir de notre élément et récupérer tous ces enfants. On en profitera aussi pour extraire la largeur et la hauteur des images.
Une fois que l'on aura notre tableau d'image on cherchera à savoir la largeur que chaque image occupera pour la hauteur de ligne cible.
const images = [{width: 200}, {width: 300}, {width: 150}...] Avec ce tableau on va pouvoir commencer à constituer nos lignes. On parcourra notre tableau d'images et on additionnera la largeur (avec le gap si il y en a un) jusqu'à ce que la largeur cumulée dépasse celle du conteneur.
Si la largeur dépasse, on peut construire une ligne d'images. On devra ensuite réduire la largeur des images pour les faire rentrer dans le conteneur.
Affichage en grille
Par chance on va pouvoir s'éviter des calcul en se reposant sur le système de grille du navigateur et son système de fractions. Si je dois placer des images qui ont originellement 100px, 300px et 350px sur une ligne. Je peux utiliser le grid-template-columns pour conserver les ratios originaux tout en occupant l'ensemble de la largeur du container.
<div style="display:grid; grid-template-columns: 100fr 300fr 350fr; gap: .5rem">
<img/>
<img/>
<img/>
</div>Ainsi, c'est le navigateur qui va s'occuper de redimensionner la largeur de chacune de nos colonnes pour faire rentrer les images sélectionnées dans la largeur.
Redimensionnement intelligent
Un autre point de vigilance sera l'axe de dimensionnement. Avant de construire notre ligne il faudra analyser l'opération qui appliquera la transformation la plus faible. Dans le cas ci dessous, il sera préférable de déplacer l'image qui dépasse sur la ligne suivante, pour ensuite légèrement agrandir les images de la ligne, plutôt que d'essayer de rentrer les 5 images sur la même ligne en réduisant leur taille.
Cette option permet d'avoir une hauteur de ligne qui sera plus proche de la hauteur cible et assurera une meilleur cohérence visuelle (mais peut être désactivé si on veut s'assurer que les images ne dépassent jamais la hauteur cible).
A vous de jouer !
A travers ces explications vous avez une idée de l'approche à faire niveau logique générale.
- On récupère la liste des images et on calcul la largeur cible
- On parcourt chaque image en additionnant les largeur
- si la largeur cumulée ne dépasse pas le conteneur, on continue
- sinon, on crée une ligne (en utilisant le principe de la grille) et on y place les images parcourues. On réinitialise la largeur cumulée et on continue à boucler sur les images suivantes.
