流体宽度和高度相等的行中的等高div(或li)(已完成90％) [英] Equal height divs (or li) in rows with fluid width and height (90% finished)

问题描述

嘿，所以我发现了CSS技巧Chris Coyier编写的这个甜美的jquery片段，该片段将div元素的高度重置为最高元素，该div元素的高度在页面上(在同一行)相同，位于同一位置.

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.

问题 此解决方案几乎适用于流体宽度布局，并在顶部位置更改时重置高度，但在页面首次加载时将其重置为该行中当前最高元素的原始高度.这是一个问题，因为自从此页面首次加载以来，最高元素的高度可能已更改，这是因为使用了诸如ems之类的相对单位，或者是使用了段落自动换行. 建议的解决方案 解决方案是将行元素的高度设置为最高元素的当前高度，而不是原始高度.我未能成功完成此任务.

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.

这里是摘录，其中"li.half"是要比较和调整大小的元素.

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

请让我知道是否可以确定如何在调整窗口大小时调整setConformingHeight.

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

谢谢！

推荐答案

刚刚从Micah Godbolt的CodePen上发现了这一点，它似乎正在发挥作用.它是从Chris Coyier借来的，后者是从Stephen Akins借来的.实际上是此页面下"jquery等高逐行"的搜索结果.

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

这篇关于流体宽度和高度相等的行中的等高div(或li)(已完成90％)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！