Получите высоту каждой строки при использовании сортировки JqueryUI

Question

Я использую JqueryUI sortable, чтобы я мог сортировать и переупорядочивать блоки. Я пытаюсь получить все высоты, чтобы сравнять максимальную высоту за строку, учитывая, что я не знаю высоты каждого блока и что они постоянно меняются (потому что они сортируются). Как получить максимальную высоту каждой строки?

Вот пример того, что я работаю с: http://jsfiddle.net/zrNNZ/40/

Я использую инлайн-блоки. Вот CSS:

.blocks { 
padding: 0px; 
border: 0px; 
margin: 0px; 
display: inline-block; 
font-size:0px; 
width: 600px; 
} 

.block { 
opacity: 1.0; 
display: inline-block; 
vertical-align: top; 
position:relative; 
padding: 0px; 
border: 0px; 
margin-right: 2px; 
margin-bottom: 2px; 
border-spacing: 0px; 
}; 

Как вы можете видеть в этом примере каждый блок, начиная со следующим рядом, естественно, вмещающим на максимальную высоту предыдущего ряда. Вместо того, чтобы иметь много пустого пространства между меньшими блоками и большими блоками, я хочу максимальную высоту строки, чтобы я мог растянуть меньшие блоки, чтобы каждая строка имела одинаковую высоту. Максимальная высота каждой строки может меняться, я просто хочу, чтобы все высоты были одинаковыми на всем протяжении.

Answer 1

Надеюсь, это поможет вам, сообщите мне, если у вас есть вопросы. Я использую событие остановки и ищу, когда левая позиция блока - 0, так что я знаю ее новую строку.

stop: function(event, ui){ 
    //alert('stopped'); 
    var row = 0; 
    var maxheight = 0; 
    $('.block').each(function(){ 
     if($(this).position().left == 0){ 
      if(row > 0) 
       alert('Row ' + row + ' max-height: ' + maxheight); 
      row++; 
      maxheight = $(this).height(); 
     } 
     else { 
      if(maxheight < $(this).height()) 
       maxheight = $(this).height(); 
     } 
    }); 
    if(row > 1) 
     alert('Row ' + row + ' max-height: ' + maxheight); 
} 

Вот скрипка

http://jsfiddle.net/zrNNZ/43/