Possiamo ottenere l'effetto di box di uguale altezza usando jQuery insieme al metodo max() dell'oggetto Math. In questo modo i nostri box avranno tutti la stessa altezza anche quando contengono un maggiore o minore numero di contenuti. Vediamo come.
Creiamo il seguente plugin, molto semplice:
(function($) {
$.fn.equalHeight = function() {
var that = this;
return that.each(function() {
var height = Math.max(that.height(), 0);
that.height(height);
});
};
})(jQuery);
Il plugin estrae il valore massimo dell'altezza del box più alto nel set e lo usa per impostare l'altezza dei restanti box. Un esempio:
$(function() {
$('div.box', '#container').equalHeight();
});
Potete visionare l'esempio finale in questa pagina.