webdevjs

Blocks of equal heights in a row

Setting the height of the elements in the particular row to the tallest one.

This assumes that the is a wrapper element with a class of products and the blocks that need to be of equal heights have a class of card.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

function getNumOfCols() {
    var cols = 5;

    if ( window.matchMedia("(min-width: 720px) and (max-width: 1279px)").matches ) cols = 4;
    if ( window.matchMedia("(min-width: 320px) and (max-width: 719px)").matches ) cols = 2;

    return cols;
}

function columnConformPerRow() {
    $('.products').height('auto');

    var gridHeight = [],
        l = $('.articles .card').length,
        cols = getNumOfCols(),
        rows = Math.ceil(l / cols),
        $elems;

    for ( var i = 1, j = 0; i <= rows; i++, j++ ) {
        $elems = $('.products .card').slice(j * cols, rows * cols);
        $elems.css('height', '');
        $elems.each(function(){
            gridHeight.push($(this).outerHeight());
        });
        $elems.css('height', Math.max.apply(Math, gridHeight));
        gridHeight.length = 0;
    }

}

columnConformPerRow();
Share