equalHeightAdjacents v2 - make objects in a two column list equal height horizontally OR a three column list equal height

equalHeight2.js

// Divs (or whatever) floating side by side on rows of 2 or 3 each need to have equal height to float pretty. Majsonry-plugins doesn't make them equal height even though they handle the float-issues. This snippet makes all boxes on the same row equal height by finding the tallest box and setting the others to the same height.
// Disclaimer: should have been rewritten to arrays to support any amount of columns ... but yeah, "tomorrow" right? ;P

// If you toggle visibility on elements, re-call this function again like so:
// equalHeightAdjacents( $(".cards:visible") );

function equalHeightAdjacents( elems ) {
    // Make Tema cards equal height per row so we don't get holes when using float
    var cardleft, cardmid, cardright;
    var cardleft_h = 0;
    var cardmid_h = 0;
    var cardright_h = 0;
    var cardhighest = 0;
    var columns = 2;
    var i = 0;

    // If we have a sidebar, expect 2 cards per row
    // Otherwise expect 3 cards per row
    if ( ! $("#sidebar1").length ) { // If element #sidebar is found we have 2 columns, otherwise 3 
        columns = 3;
        $(".rutinekort").css("width","31.3%"); // Resize cards
    }

    // Check the height of all the cards, adjust as needed
    $(elems).each( function() {

        i++;

        // Store the cell and its height (check which element we're at now)
        if ( cardleft_h === 0 ) {
            
            cardleft = $(this);
            cardleft_h = cardleft.outerHeight(false);

        } else if ( cardmid_h === 0 && columns === 3 ) { // Only use the mid-card if we have three columns
            
            cardmid = $(this);
            cardmid_h = cardmid.outerHeight(false);
            
        } else if ( cardright_h === 0 ) {
            
            cardright = $(this);
            cardright_h = cardright.outerHeight(false);
            
        }
        
        // Check if last column on this row
        if ( i % columns === 0 ) {

            // Assign the highest height to entire column
            if ( cardleft_h > 0 && cardright_h > 0 ) {

                // Find the tallest card
                if ( cardleft_h >= cardright_h ) {
                    cardhighest = cardleft_h;
                } else {
                    cardhighest = cardright_h;
                }

                if ( cardmid_h > cardhighest ) {
                    cardhighest = cardmid_h;
                }

                if ( columns === 3 ) {
                    cardmid.css('height', cardhighest + 'px');
                }

                // Set height on left and right card
                cardleft.css('height', cardhighest + 'px');
                cardright.css('height', cardhighest + 'px');

            }

            // Reset stored values for next row
            cardleft_h = 0;
            cardright_h = 0;
            cardmid_h = 0;

        }

    });
}