Egaliser la hauteur des éléments en responsive

Petite fonction JS pour égaliser la hauteur des éléments. - Permet de créer plusieurs instances (Pour différencier les éléments qui ne sont pas sur la même ligne par exemple) - Fonctionne lorsque l'écran est redimensionné

by oilvier

HTML

<div class="grids">
    <div class="grid-1-3">
        <div class="box">
            Mauris fringilla pretium odio, sit amet rutrum justo fermentum a. Aenean iaculis, lorem eu mollis facilisis, eros quam metus.
        </div>
    </div>
    <div class="grid-1-3">
        <div class="box">
           Morbi sit amet ipsum metus.

        </div>
    </div>
    <div class="grid-1-3">
        <div class="box">
           Quisque ac neque sed metus suscipit sagittis. Nulla ultrices viverra fusce.
        </div>
    </div>
    <div class="grid-1-3">
        <div class="box">
            Duis commodo; est eu aliquam ornare; nibh magna malesuada metus, vitae mattis mauris magna nec velit. Sed eu fermentum leo. Etiam ligula lacus nullam.

        </div>
    </div>
    <div class="grid-1-3">
        <div class="box">
            Sed sed rutrum dolor. Etiam suscipit dapibus ornare. Integer a lorem eu enim auctor aliquet at in velit. Donec et enim sed tellus feugiat egestas dignissim vitae justo. Etiam hendrerit congue justo ut varius. Mauris eleifend nisl ut massa massa nunc.
        </div>
    </div>
    <div class="grid-1-3">
        <div class="box">
           Morbi aliquam sem non risus congue, vel suscipit erat ultricies. Sed quis imperdiet lorem. Integer nec augue odio? Ut nullam.
        </div>
    </div>
</div>
<div class="grids">
    <div class="grid-1-3">
        <div class="box js-height-alpha">
             Mauris fringilla pretium odio, sit amet rutrum justo fermentum a. Aenean iaculis, lorem eu mollis facilisis, eros quam metus.
        </div>
    </div>
    <div class="grid-1-3">
        <div class="box js-height-alpha">
           Morbi sit amet ipsum metus.
        </div>
    </div>
    <div class="grid-1-3">
        <div class="box js-height-alpha">
            Quisque ac neque sed metus suscipit sagittis. Nulla ultrices viverra fusce.
        </div>
    </div>
    <div class="grid-1-3">
        <div class="box js-height-beta">
            Duis commodo;...

CSS

*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin:0; padding:0;}

.grids {margin-left:-10px; letter-spacing:-0.31em;}
.opera:-o-prefocus, .grids {word-spacing: -0.43em; /* Fix for Opera */}
	/* La classe doit absolument commencer par .grid- */
	[class^="grid-"] {padding-left:10px; display: inline-block; vertical-align: top; word-spacing:normal; letter-spacing:normal;}

/* Grid : .grid-1, .grid-half, ... */
.grid-full {width:100%;}
.grid-half {width:50%;}
.grid-1-3 {width:33.333%;}
.grid-2-3 {width:66.666%;}
.grid-3-4 {width:75%;}
.grid-1-4 {width:25%;}
.grid-1-5 {width:20%;}
.grid-2-5 {width:40%;}
.grid-3-5 {width:60%;}
.grid-4-5 {width:80%;}
.grid-1-6 {width:16.666%;}
.grid-5-6 {width:83.33%;}

.grids {margin-bottom:15px;}
.box {padding:5px; font-size: 12px; font-family:Arial; color: #FFF; background:firebrick; text-align: center; margin:0 0 5px;}

JavaScript

/* Equal Height columns */
$.fn.equalize = function() {
    var maxHeight = 0;
    
    this.each( function() {
        $(this).removeAttr('style');
        if($(this).outerHeight() > maxHeight) {
            maxHeight = $(this).outerHeight();
        } 
    });
    
    this.css('min-height', maxHeight);
}; 

$(window).resize( function() {
    $('.js-height-alpha').equalize();
    // Si il y a plusieurs lignes, on peut créer une deuxième instance pour différencier les tailles.
    $('.js-height-beta').equalize();
}).trigger('resize');