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/

Une liste en élément flottant

Quand on fait une liste (de produits, de news, ou autre) avec des blocs flottants SOUVENT il y a des petits soucis quand on passe à la ligne. (un bloc qui veut pas s'aligner par exemple)
A part en fixant la hauteur des blocs en général c'est la galère.


Alors qu'avec une ligne de js on peut résoudre le problème (ici pour des lignes de 3 éléments flottants) :


On récupère la liste puis on applique un clear: both; sur le 4e élément flottant.
Cet élément revient dans le flux html et il n'y aura pas de saut de bloc sur la ligne suivante.


en jquery: 
$('#list-search > li:nth-child(3n+1)').css('clear','both');


en mootools
$$('#list-search > li:nth-child(3n+1)').setStyle('clear','both');


Après trois éléments flottant (une ligne), on remet l'élément suivant dans le flux et on repart sur une autre ligne.