行中等高的 div（或 li），具有可变的宽度和高度（已完成 90%）

Question

嘿，所以我发现了 CSS-tricks Chris Coyier 的这个甜蜜的 jquery sn-p，它将在页面上共享相同顶部位置（在同一行上）的 div 元素高度重置为最高元素。

问题 此解决方案几乎适用于流体宽度布局，并在顶部位置更改时重置高度，但在页面首次加载时将其重置为行中当前最高元素的原始高度。这是一个问题，因为自从首次加载此页面以来，由于使用了相对单位（如 ems）或由于段落自动换行，最高元素的高度可能已经发生了变化。 建议的解决方案 解决方案是将行元素的高度设置为最高元素的当前高度，而不是原始高度。我没有成功。

这里是 sn-p，其中“li.half”是被比较和调整大小的元素。

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();
    });
});

如果您能弄清楚如何在调整窗口大小时调整 setConformingHeight，请告诉我。

谢谢！

Answer 1

刚刚在 Micah Godbolt 的 CodePen 上发现了这个，它似乎很有魅力。它是从 Chris Coyier 那里借来的，后者是从 Stephen Akins 那里借来的。其实就是这个页面下的“jquery equal height row by row”的搜索结果。

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

Answer 2

这些解决方案不适用于 window.resize()，因为在计算新的实际高度之前，应使用 $el.height('auto') 解锁元素高度。

这是我的解决方案：

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');
}