jQuery: gestire i layout CSS colonnari

Un layout colonnare realizzato con i CSS e la proprietà float è difficile da gestire se vogliamo mantenere le colonne divise in righe omogenee. Fortunatamente jQuery si rivela d'aiuto.

Se avete un layout di questo tipo:

#wrapper {
	overflow: hidden;
}

.column {
	float: left;
	width: 29%;
	margin: 0 2% 1em 1%;
}

.clear {
	clear: both;
}

avrete tre colonne sulla stessa riga solo se l'altezza delle colonne è la stessa. In caso contrario le colonne si sovrapporranno in modo arbitrario.

Con jQuery possiamo inserire un elemento per il clear esattamente ogni tre colonne:

$( ".column", "#wrapper" ).each(function( i ) {
	var $column = $( this );
	var index = i + 1; // i inizia da 0
	
	if( index % 3 == 0 ) {  // ogni 3 colonne
		$( "<div class='clear'/>" ).insertAfter( $column );
	}
});

In questo modo le nostre colonne saranno sempre ordinate per riga.