Equal height divs (or li) in rows with fluid width and height (90% finished)

问题

Hey so I found this sweet jquery snippet by CSS-tricks Chris Coyier that resets div elements heights that share the same top position on the page (are on the same row) to the tallest element.

The Problem This solution almost works with fluid width layouts and resets height when top positions changes but it resets it to the original height of the current tallest element in the row when the page first loaded. This is an issue because the height of the tallest element might have changed since this page first loaded because of the use of relative units like ems or because of word wrapping with paragraphs. Proposed Solution The solution would be to have the row's elements' height being set to the tallest element's current height, not the original height. I have been unsuccessful in accomplishing this.

Here is the snippet where "li.half" is the elements being compared and resized.

jQuery(document).ready(function($) {
// these are (ruh-roh) globals. You could wrap in an
    // immediately-Invoked Function Expression (IIFE) if you wanted to...
    var currentTallest = 0,
        currentRowStart = 0,
        rowDivs = new Array();

    function setConformingHeight(el, newHeight) {
        // set the height to something new, but remember the original height in case things change
        el.data("originalHeight", (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight")));
        el.height(newHeight);
    }

    function getOriginalHeight(el) {
        // if the height has changed, send the originalHeight
        return (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight"));
    }

    function columnConform() {

        // find the tallest DIV in the row, and set the heights of all of the DIVs to match it.
        $('li.half').each(function() {

            // "caching"
            var $el = $(this);

            var topPosition = $el.position().top;

            if (currentRowStart != topPosition) {

                // we just came to a new row.  Set all the heights on the completed row
                for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) setConformingHeight(rowDivs[currentDiv], currentTallest);

                // set the variables for the new row
                rowDivs.length = 0; // empty the array
                currentRowStart = topPosition;
                currentTallest = getOriginalHeight($el);
                rowDivs.push($el);

            } else {

                // another div on the current row.  Add it to the list and check if it's taller
                rowDivs.push($el);
                currentTallest = (currentTallest < getOriginalHeight($el)) ? (getOriginalHeight($el)) : (currentTallest);

            }
            // do the last row
            for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) setConformingHeight(rowDivs[currentDiv], currentTallest);

        });
    }


    $(window).resize(function(){
        columnConform();
    });

    // Dom Ready
    // You might also want to wait until window.onload if images are the things that
    // are unequalizing the blocks
    $(function() {
        columnConform();
    });
});

Please let me know if you can figure out how to make the setConformingHeight adjust on window resize.

Thanks!

回答1:

Just found this on CodePen from Micah Godbolt and it seems to be working a charm. It's borrowed from Chris Coyier, who borrowed from Stephen Akins. It was actually the search result under this page for "jquery equal height row by row."

http://codepen.io/micahgodbolt/pen/FgqLc

回答2:

Those solutions didn't work on window.resize() as elements height should be unlocked with $el.height('auto') before calculating new real height.

Here is my solution :

var currentRowTop = -100, currentHighest=  0;

$('.page-wrapper .cc').each(function() {
    $el=$(this);
    if($el.position().top!=currentRowTop){
        equalizeHeight();
        currentRowTop = $el.position().top; 
        $el.height('auto').addClass('same-height');
        currentHighest=$el.height();
    }else{
        $el.height('auto').addClass('same-height');
        currentHighest = ($el.height()>currentHighest) ? $el.height() : currentHighest ;
    }
});
equalizeHeight();   

function equalizeHeight(){
    if($('.same-height').size()==0) return;
    $('.same-height').height(currentHighest).removeClass('same-height');
}

来源：https://stackoverflow.com/questions/19437476/equal-height-divs-or-li-in-rows-with-fluid-width-and-height-90-finished