有没有一种方法可以检测一行何时随着浮动左LI的UL而改变

Is there a way to detect when a row changed with a UL of float-lefted LIs?

本文关键字：LI 改变 UL 方法 一种 一行 有没有 检测 何时随      更新时间：2023-09-26

以下是我的产品示例列表：http://imgur.com/7IGthIa

我有一个在document ready上运行的函数，它在每个列表中循环，并调整img周围跨度的高度，这样整个列表中的空间就统一了。

我想知道的是，有没有一种方法可以让它检测"行"何时发生变化，从而使跨度在第一行上显示为原样（因为它们的大小基于前两行，但在第二行，对于单个条目，跨度是该图像的高度？

该函数对LI元素的高度也做同样的事情，如果有可行的解决方案，我可能会将其调整为每行的大小。

这是它运行的计算高度的函数，如果它有任何用处的话：

if ( jQuery('.product_list').length ) {
    var tallest = 0;
    var tallest_img = 0;
    jQuery('.product_list li').each( function() {
        if ( jQuery(this).height() > tallest ) { tallest = jQuery(this).height(); }
        if ( jQuery(this).children('a').children('span').children('img').height() > tallest_img ) { 
            tallest_img = jQuery(this).children('a').children('span').children('img').height(); 
        }
    });
    jQuery('.product_list li').height( tallest );
    jQuery('.product_list li span').height( tallest_img );
}

谢谢！

您可以通过检查元素的offset().top来检测行何时更改。

由于您要在span上设置高度，我假设它们具有display: inline-block的样式。（不能设置内联元素的高度。）

由于span是li的孩子，你不必担心设置li的高度（除非我误解了你的问题）。

该代码遍历span，根据每行中最高的img，每行赋予它们相等的高度：

function sizeSpans() {
  var spans= $('ul span'),
      tallest,
      top= $(spans[0]).offset().top;
  spans.css('height', '');
  tallest= $(spans[0]).height();
  spans.each(function(idx1) {
    if($(this).offset().top === top) {
      tallest= Math.max(tallest, $(this).height());
      spans.each(function(idx2) {
        if(idx2 <= idx1 && 
           $(this).offset().top === top
          ) {
          $(this).css('height', tallest);
        }
      });
    }
    else {
      tallest= $(this).height(),
      top= $(this).offset().top;
    }
  });
} //sizeSpans

您可以将其添加到resize处理程序中：

$(window).resize(sizeSpans);

工作Fiddle

单击顶部的"大小跨度"按钮。调整框架大小以查看大小的重新调整。

相关文章：