jeudi 4 août 2011

Deux colonnes (ou plus) rapidement en jquery

Les colonnes équilibrées reviennent souvent dans l'intégration de contenu, il existe tout un tas de solutions, mais on peut le faire très vite avec une boucle each() en jquery :

En récupérant la taille de chaque élément (outerHeight qui prend la taille du contenu, du padding, et du margin de l'élément ciblé) on le compare avec un variable et c'est cette variable qui est utilisée pour gérer la taille des éléments.



http://jsfiddle.net/powerMugen/SWyKG/

Et voilà ! Simple et rapide. J'ai rarement trouvé plus simple. Pour les chanceux qui ont des projets dans lesquels ils peuvent se lâcher en css3, il y a des solutions natives pour la gestion des colonnes :
http://www.quirksmode.org/css/multicolumn.html
http://www.w3.org/TR/css3-multicol/