流体宽度元素的等高高度行 [英] Equal Height Rows for Fluid Width Elements

问题描述

我曾多次使用Chris Coyiers 行中的等高高度块 jQuery指令码，它总是工作伟大。

话虽如此，我一直在开发专为特定分辨率制作的网站。这一次我在开发一个响应式网站和主容器有流体宽度。因此，我遇到了一个问题，无法找到解决我的问题的办法。

在他的帖子里，Chris谈到流体宽度：

关于流体宽度？不使用表格的一个主要点是，浮动的div可以根据可用的水平空间重新排列自己，这对于流体宽度是很好的。我们可以调整上面的代码来处理它。基本上，这是第一次运行我们将测量每个块的高度，并用jQuery的data（）方法记住它。然后，当窗口调整大小时，请再次运行代码，但使用原始大小来调整行，而不是新的大小。

请注意，他专门引用了一个流体宽度容器。在我的情况下，它不只是容器，但子元素也有流体宽度。

我相信，因为元素的originalHeight属性，更改容器大小，脚本将不再正常工作。

我的猜测可能是错误的，但是这种方式不能使用流体宽度元素。寻找一些帮助！

当然，这里有一个 jsfiddle 我创建以演示该问题。只需调整窗口的宽度，你会注意到容器的高度不会更新。

我运行下面的代码来调用窗口上的函数resize event：

  $（window）.resize（function（）{
 columnConform（）; 
 }）; 
  

提前感谢

解决方案

您只需平衡一行上存在的列的高度，以便用此

替换所有的JS。

  $。fn.extend（{
 equalHeights：function（options）{
 var ah =（Math.max.apply（null，$（this）.map $（this）.height（）;}）。get（）））; 
 if（typeof ah =='number'）$（this）.height（ah）; 
} 
}）; 
  

并执行

  $（document）.ready（function（）{
 $（window）.resize（function（）{
 $（'。equalize'）。equalsHeights b $ b}）。trigger（'resize'）; //不要写代码两次只是为页面加载执行 - 触发刚绑定的事件
 
}）
  

但是如果你想每个伪行执行 working demo

 < ul class =eqme> 
< li>< h1>一个< / h1>< / li& 
< li>< h2>两个< / h2>< / li& 
 .... 
< / ul> 
  

JS

  $。fn.extend（{
 equalHeights：function（）{
 var top = 0; 
 var classname =（'equalHeights'+ Math.random （';'，''）; 
 $（this）.each（function（）{
 if（$（this）.is（'：visible'））{
 var thistop = $（this）.offset（）。top; 
 if（thistop> top）{
 $（'。'+ classname）.removeClass（classname）; 
 top = thistop; 
} 
 $（this）.addClass（classname）; 
 $（this）.height（'auto'）; 
 var h =（Math.max.apply $（'。'+ classname）.map（function（）{return $（this）.outerHeight（）;}）get（）））; 
 $（'。'+ classname）.height ）; 
} 
}）removeClass（classname）; 
} 
 
}）; 
 
 $（function（）{
 $（window）.resize（function（）{
 $（'。eqme li'）。equalsHeights（）; 
 }）。trigger（'resize'）; 
}）; 
  

这将甚至会处理同一父项的子项的许多元素， ，例如当一行上只有10个符合时，或 li时， ul 包含100 li width是静态的但是页面宽度不是，在调整大小时，它们会在窗口收缩时清除到新行上（或者如果扩展宽度，则浮动回到上面），然后它们的高度将修正

反馈表明

在某些情况下，code> outerHeight（）的工作效果优于 .height（）。

在生产过程中，在window.resize函数中，我添加了一个clearTimeout和setTimeout 100ms，然后对大小更改做出反应，以防止在通过拖动拐角调整大小时放慢速度。

I've used Chris Coyiers Equal Height Blocks in Rows jQuery script many times before, and it's always worked great.

That being said, I've always developed websites built for a specific resolution. This time around I'm developing a responsive website and main container has a fluid width. As such, I've encountered an issue and can't find a solution to my problem.

In his post, Chris says this about fluid widths:

What About Fluid Width? One of the main points of not using a table for this is that floated divs can rearrange themselves based on the available horizontal space, which is nice for fluid width. We can adjust the above code to deal with that as well. Basically the first time this is run we'll measure the height of each block and remember it with jQuery's data() method. Then when the window is resized, run the code again but use the original size to adjust the rows, not the new size.

Note that he's specifically referencing a fluid width container. In my case it's not just the container, but the child elements that also have fluid widths. The very blocks that I need to equalize are the same blocks have fluid widths and adjust to the resolution of the window/container.

I believe that because the element's 'originalHeight' changes with the container size, the script will no longer work properly.

My speculation may be wrong, but one way or another this isn't working with fluid width elements. Looking for some help!

Of course, here's a jsfiddle I created to demonstrate the problem. Just resize the width of the window and you'll notice the heights of the containers do not update.

I'm running the following code to call the function on the window resize event:

$(window).resize(function() {
    columnConform();
});

Thanks in advance

解决方案

You're only equalizing the heights of columns that exist on one row so you could replace all that JS with this

$.fn.extend({
    equalHeights: function(options){
      var ah=(Math.max.apply(null, $(this).map(function(){ return $(this).height(); }).get()));
      if (typeof ah=='number') $(this).height(ah);
    }
 });

and execute like so

$(document).ready(function() {
    $(window).resize(function() {
        $('.equalize').equalHeights();
    }).trigger('resize'); // don't write code twice just to execute on page load - trigger the event you just bound to instead

})

But if you want to do it per pseudo row working demo

<ul class="eqme">
  <li><h1>One</h1></li>
  <li><h2>Two</h2></li>
  ....
</ul>

JS

$.fn.extend({
equalHeights: function(){
    var top=0;
    var classname=('equalHeights'+Math.random()).replace('.','');
    $(this).each(function(){
      if ($(this).is(':visible')){
        var thistop=$(this).offset().top;
        if (thistop>top) {
            $('.'+classname).removeClass(classname); 
            top=thistop;
        }
        $(this).addClass(classname);
        $(this).height('auto');
        var h=(Math.max.apply(null, $('.'+classname).map(function(){ return $(this).outerHeight(); }).get()));
        $('.'+classname).height(h);
      }
    }).removeClass(classname); 
}       

});

$(function(){
  $(window).resize(function(){
    $('.eqme li').equalHeights();
  }).trigger('resize');
});

This will even take care of many elements that are the children of the same parent even if they break row, e.g. a ul containing 100 li elements when only 10 fit on one row, or when the li width is static but the page width is not, on resize they'll clear onto new lines when the window is shrunk (or float back to the one above if expanding the width) then their heights will fix to suit the tallest per pseudo row.

Notes:

Feedback suggests that outerHeight() works better than .height() in some situations.

In production, within the window.resize function, I added a clearTimeout and setTimeout of 100ms before reacting to the change of size to prevent slowdown when resizing by dragging a corner.

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