jquery - 流動的な幅と高さ (90% 完成) の行で等高の div (または li)

Question

ねえ、CSS-tricks Chris Coyier によるこの甘い jquery スニペットを見つけました。これは、ページの同じ上部位置を共有する (同じ行にある) div 要素の高さを最も高い要素にリセットします。

問題 この解決策は流動的な幅のレイアウトでほとんど機能し、上部の位置が変更されると高さをリセットしますが、ページが最初に読み込まれたときの行の現在の最も高い要素の元の高さにリセットします。em などの相対単位の使用または段落でのワード ラップが原因で、このページが最初に読み込まれてから、最も高い要素の高さが変更された可能性があるため、これは問題です。 提案され た解決策 解決策は、行の要素の高さを元の高さではなく、最も高い要素の現在の高さに設定することです。私はこれを達成することに失敗しました。

「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を調整する方法を理解できるかどうか教えてください。

ありがとう！