Nous somme nombreux à rêver d’une présentation dynamique proche de la mise en page des journaux… en colonnes.

Afficher de multiples colonnes en HTML reste une affaire délicate, on triche parfois avec les CSS, on bricole, mais rien ne fonctionne de manière fluide, simple et efficace… encore moins avec un site dynamique en PHP.

Le principal problème venant des dimensions souvent hétérogènes des colonnes à afficher. Soit on va les « trier » avec un élément « nettoyeur » qui chasse les colonnes suivantes sous les précédentes, soit en englobant les colonnes de contenu, avec toujours une gestion du « float » qui peut poser problème (notamment avec Internet Explorer).

Ce que propose cette solution JavascriptjQuery MasonryUne solution à base de jQuery existe, c’est la librairie Masonry développée par David DeSandro. Elle permet de s’affranchir des limites du HTML et des CSS. Elle propose de plus un affichage dynamique du contenu, s’adapte au Responsive Design, bref c’est la solution élégante pour du contenu en colonnes multiples sans heurts.

Le site GrafikArt propose une vidéo tutoriel pour utiliser cette librairie :

 

Quelques sites utilisant cette technique :

A noter une version allégée de Masonry appellée Vanilla-Masonry, elle utilise les CSS pour la gestion horizontale des éléments, à voir de près…

Sources : Grafikart.fr, David DeSandro, jQuery Masonry

Laisser un commentaire