Exemple de solution mise en place : http://www.despetitshauts.com/fr/t-shirtsm-courtes-25.html.
Tentative en exploitant la fonction outerHeight de jQuery
La solution ci-dessous semble fonctionner 🙂
Simulation : http://jsfiddle.net/frontenddeveloper/2s0s1eag/29/.
Même chose mais à partir de Bootstrap : http://jsfiddle.net/frontenddeveloper/51xxem3p/6/.
Tentative avec la propriété columns de CSS3
Simulation : http://jsfiddle.net/frontenddeveloper/5doayaa5/5/.
Pour :
- On conserve un markup HTML cohérent (les éléments de la liste sont déclarés dans un ordre logique d’apparition)
- On ne surcharge pas le serveur par l’emploi de JavaScript
Contre :
- Pas compatible à partir d’IE9 (
<a href="http://caniuse.com/#search=columns">columns</a>) (voir pour l’existence d’un polyfill qui gère les contraintes responsive) - Le contenu n’est pas ordonné de gauche à droite (rangée après rangée), mais de haut en bas (colonne après colonne)
- Pas de contrôle sur le comportement lorsqu’il n’y a pas le nombre exact d’éléments (2 looks + 16 produits) dans la page, notamment en responsive
- Comportement responsive pas terrible…
Tentative avec Bootstrap 3 et Masonry
Inspiré de : http://codepen.io/anon/pen/eIxCp. Simulation : http://jsfiddle.net/frontenddeveloper/rbgsypLm/2/.
Pour :
- Le contenu est ordonné de gauche à droite (rangée après rangée)
Contre :
- On est obligé de surcharger légèrement Bootstrap (
.container { padding-left:0; padding-right:0; }) et le framework CSS peut poser problème lorsqu’il est couplé à Masonry… - On ne conserve pas un markup HTML cohérent (les éléments de la liste ne sont pas déclarés dans un ordre logique puisque le deuxième look est intercalé entre le produit 13 et le produit 14)… Avec tous les ennuis que cela comporte de gérer son imbrication au sein de la liste et de conserver un affichage cohérent (y compris en responsive) lorsque le nombre d’éléments change !
- Toujours pas de contrôle sur le comportement lorsqu’il n’y a pas le nombre exact d’éléments (2 looks + 16 produits) dans la page
- Comportement responsive catastrophique
Conclusions :
A moins de partir dans un dev JS très lourd qui prend en compte le nombre d’éléments à afficher pour replacer le 2ème look dans le DOM à chaque fois :
- qu’on agit soit sur la largeur de la fenêtre (problématique responsive),
- ou qu’on agit sur le nombre de produits à afficher (design prévu pour 2 looks et 16 produits – il peut y avoir moins de produits dans le rayon ou suite à un tri effectué par l’utilisateur)
…c’est pas possible d’avoir un affichage cohérent :/