带有jQuery的Bootstrap 3等高列需要js的帮助 [英] Bootstrap 3 Equal Height Columns with jQuery need assistance with the js

问题描述

我一直在使用此位( jQuery等高响应div行)的jQuery具有相等的高度，并且效果很好，但对于BS2和BS3，如果使用相同的模式，则不会扫描行以使高度相等，而是先扫描页面本身，然后再扫描所有模式(行>同一页上的col- -)可以获取页面上最高的高度.那不是理想的实现.

I've been using this bit (jQuery equal height responsive div rows) of jQuery for equal heights and it works very well, but with BS2 and BS3 if the same pattern is used, it doesn't scan the row to make the equal heights, it scans the page itself and then all patterns (row > col--) on the same page get the height of the tallest on the page. That's not the desired implementation.

http://jsbin.com/aVavuLeW/14/

上面的JSBin上面有一个使用BS3列的示例(它的一个副本).您不能在堆积点的列上具有相对位置，因此出于本Bin的目的已复制了这些位置.如您所见，如果在每行上创建一个不同的类(在此示例中为.foo和.foo2)，然后各列运行，但是如果您决定使用相同的模式，则页面上最高的高度将接管.

This above JSBin has an example of it working with BS3 columns (a copy of it). You can't have relative position on the columns at the stacking point, so these have been copied for the purpose of this Bin. As you can see, if you create a different class on each row (.foo and .foo2 in this example) and then the columns behave but if you decide to use the same pattern the height of the tallest on the page will take over.

问题:如何解决使用相同模式时会基于页面而不是基于行计算的问题?

Question: How to fix the problem of when the same pattern is used it calculates based on the page and not the row?

谢谢！

推荐答案

如果我正确理解您希望每行具有相同的高度(基于最高div)，而每行具有相同的类名值，例如foo，然后以下代码执行该操作.这个想法是检查调整大小的元素的父级，以及父级是否已更改(即在调整第二个div.row的div的大小时)，然后应用更改并重置max height的值.为了为指定的父项工作，引入了一个参数来指定父项选择器. http://jsbin.com/uBeQERiJ/1

If i understood correctly that you want each row to have the same height, based on tallest div, while each row has the same class name values e.g. foo then the following code does that. The idea is to check the parent of the elements that are resized and if the parent has changed i.e. when resizing divs of the second div.row, then apply changes and reset the values of max height. In order to work for the specified parent a parameter has been introduced to specify the parent selector. http://jsbin.com/uBeQERiJ/1

$.fn.eqHeights = function(options) {

    var defaults = {  
        child: false ,
      parentSelector:null
    };  
    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 = [];
    var parentEl;
    elmtns.height('auto').each(function() {

      if(options.parentSelector && parentEl !== $(this).parents(options.parentSelector).get(0)){
        $(elements).height(max_height);
        max_height = 0;
        prevTop = 0;
        elements=[];
        parentEl = $(this).parents(options.parentSelector).get(0);
      }

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

// run on load so it gets the size:
// can't have the same pattern for some reason or it scans the page and makes all the same height. Each row should be separate but it doesn't work that way.
$(window).load(function() {

//$('[class*="eq-"]').eqHeights();
  $('.foo [class*="eq-"]').eqHeights({parentSelector:'.foo'});
/*$('.foo2 [class*="eq-"]').eqHeights();*/

  }); 

这篇关于带有jQuery的Bootstrap 3等高列需要js的帮助的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！