Question

嘿所以我发现了CSS-tricks Chris Coyier发布的这个甜蜜的jquery片段，它重置了在页面上同一顶部位置（在同一行上）的div元素高度到最高元素。

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

以下是“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 Aky借来的Chris Coyier借来的。实际上，这个页面下的搜索结果是“逐行排列jquery等高”。

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

Answer 2

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

这是我的解决方案：

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

具有流体宽度和高度的行中相等高度div（或li）（完成90％）

2 个答案: