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

here's example list have of products: http://imgur.com/7igthia

i've got function runs on document-ready cycles through each list , adjusts height of span around img, space uniform throughout entire list.

what i'm wondering is, there way have detect when "row" changes, spans appear as-is on first row (as they're sized appropriately based on first two, on second row, single entry, span height of image?

the function same thing height of li elements, , i'll adjust size per row well, if there's workable solution.

this function runs calculate height, if it's of use:

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

thanks!

you can detect when row changes checking element's offset().top.

since you're setting heights on spans, i'll assume have style of display: inline-block. (you can't set height of inline element.)

since spans children of lis, shouldn't have worry setting li heights (unless misunderstood question).

this code iterates through spans, giving them equal heights per row based on tallest img within each row:

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 

you can add resize handler:

$(window).resize(sizespans); 

working fiddle

click size spans button @ top. resize frame see sizes readjust.