jQuery等于高度响应div行 [英] jQuery equal height responsive div rows

问题描述

我知道这个问题已被问了一百万次，但我正在寻找更具体的东西。

I know this question has been asked a million times but i'm looking for something more specific.

由于我的网站完全响应，我需要divs基于每行调整大小而不是将所有值设置为一个高度。

As my site is fully responsive I need the divs to be resized based on a per row basis rather than setting all to one height.

我使用以下修改后的代码来设置容器中所有div的高度：

I am using the following modified code to set the heights of all divs within a container:

$.fn.eqHeights = function() {
    var el = $(this);
    if (el.length > 0 && !el.data('eqHeights')) {
        $(window).bind('resize.eqHeights', function() {
            el.eqHeights();
        });
        el.data('eqHeights', true);
    }
    return el.each(function() {
        var curTop = 0;
        var curHighest = 0;
        $(this).children().each(function(indx) {
            var el = $(this),
                elHeight = el.height('auto').outerHeight();

            var thisTop = el.position().top;
            if (curTop > 0 && curTop != thisTop) {
                curHighest = 0;
            }

            if (elHeight > curHighest) {
                curHighest = elHeight;
            }

            curTop = thisTop;

        }).height(curHighest);
    });
};

我有 var thisTop = el.position（）。top; 确定哪些元素在同一行但不确定如何将同一行中的所有元素设置为最高值？

I have var thisTop = el.position().top; to determine which elements are on the same row but am unsure how I can then set all elements in the same row to the highest value?

当前 .height（curHighest）; 将所有元素设置为相同的高度，无论它们是否在同一行。

Currently .height(curHighest); sets all the elements to the same height whether they are on the same row or not.

感谢您的帮助。

推荐答案

使用以下代码段管理以实现此目的：

Managed to get this working with the following snippet:

$.fn.eqHeights = function(options) {

    var defaults = {  
        child: false 
    };  
    var options = $.extend(defaults, options); 

    var el = $(this);
    if (el.length > 0 && !el.data('eqHeights')) {
        $(window).bind('resize.eqHeights', function() {
            el.eqHeights();
        });
        el.data('eqHeights', true);
    }

    if( options.child && options.child.length > 0 ){
        var elmtns = $(options.child, this);
    } else {
        var elmtns = $(this).children();
    }

    var prevTop = 0;
    var max_height = 0;
    var elements = [];
    elmtns.height('auto').each(function() {

        var thisTop = this.offsetTop;

        if (prevTop > 0 && prevTop != thisTop) {
            $(elements).height(max_height);
            max_height = $(this).height();
            elements = [];
        }
        max_height = Math.max(max_height, $(this).height());

        prevTop = this.offsetTop;
        elements.push(this);
    });

    $(elements).height(max_height);
};

我还添加了指定某个元素的功能，以便更改高度。

I also added the ability to specify a certain element so that this gets the height change instead.

用法：

$('.equalheight').eqHeights();
$('.equalheight-frame').eqHeights({child:'.frame'});

这篇关于jQuery等于高度响应div行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！