javascript - 使用 css 或 jquery、javascript 平均增加所有框的高度

Question

我的 html 结构不会改变。

<article class="col-md-3 col-sm-3 diagnostic-block worth">
    <blockquote>
        <header>
            <h6>
                <a onclick="javascript:doOpenURL('xyz.aspx?Section=11','contentArea','1020','700','1');" href="javascript:void(null)">Page heading will goes</a>
            </h6>
        </header>
        <footer>
            <small>Text hereText hereText hereText hereText hereText here</small>
            <p>Worth a look</p>
        </footer>
    </blockquote>
</article>

Answer 1

http://codepen.io/pen/KwNRjQ这应该可以实现您想要的效果。

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