Вопрос: jQuery равные высоту ответные строки div


Я знаю, что этот вопрос задан миллион раз, но я ищу что-то более конкретное.

Поскольку мой сайт полностью реагирует, мне нужно, чтобы divs изменялись в зависимости от каждой строки, а не устанавливали все на одну высоту.

Я использую следующий измененный код, чтобы установить высоты всех div в контейнере:

$.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; чтобы определить, какие элементы находятся в одной строке, но я не уверен, как я могу установить все элементы в одной строке с самым высоким значением?

В данный момент .height(curHighest); устанавливает все элементы на одну и ту же высоту независимо от того, находятся они в одной строке или нет.

Спасибо за помощь в этом.


8


источник


Ответы:


Удалось выполнить эту работу со следующим фрагментом:

$.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);
};

Я также добавил возможность указать определенный элемент, чтобы вместо этого получить изменение высоты.

Применение:

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

11



Я недавно должен был сделать то же самое, вот что у меня получилось:

$.fn.equalRowHeights = function() { 

    var count = this.length;

    // set element's height auto so it doesn't mess up when the window resizes
    this.height('auto');

    for (var i = 0; i < count; ) {

        // get offset of current element
        var x = this.eq(i).offset().top;

        // get elements in the same row
        var $rowEls = this.filter(function() {
            return $(this).offset().top === x;
        });

        // set the height elements in the same row
        $rowEls.height( 
            Math.max.apply(null, $rowEls.map(function() { 
                return $(this).height(); 
            }).get()); 
        );

        // set i to avoid unnecessary iterations
        i = $rowEls.filter(':last').index() + 1;    
    }

    var $this = this,
        timer = 0;

    // bind the resize event if it hasn't been added already 
    if (!$this.data('equalRowHeights')) {
        $(window).on('resize.equalRowHeights', function(e) {
            // add a buffer to prevent firing equalRowHeights() too much
            if (timer) {
                clearTimeout(timer);
            }
            timer = setTimeout(function() {
                $this.equalRowHeights();
            }, 50);
        });
        $this.data('equalRowHeights', true);
    }   
};

Вот скрипка


1



Я принял отличный ответ dclawson и внес некоторые исправления, поэтому он работает в других ситуациях, особенно с вложенными элементами, как это делается в строках бутстрапа.

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

    var $el = $(this);
    if ($el.length > 0) {
        if(!$el.data('resEqHeight')) {
            $(window).bind('resize.resEqHeight', function () {
                $el.resEqHeight(options);
            });
            $el.data('resEqHeight', true);
        }
    } else {
        console.log("No items found for resEqHeight.");
    }

    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() { $(this).data('resEqHeight.top', $(this).offset().top ); })
        .each(function(index) {
            var $el2 = $(this);
            var thisTop = $el2.data('resEqHeight.top');

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

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

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

Он работает с тем же синтаксисом

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

0