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

Question

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

0

Я использую 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;
};

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

RosesAreRed 11 нояб. 2013, в 20:35

Источник

Теги:

javascript

jquery

html

css

jquery-ui

1 ответ

Ещё вопросы

Trevor · Answer 1 · 2013-11-11T21-45-00.000Z

Надеюсь, это поможет вам, дайте мне знать, если у вас есть какие-либо вопросы. Я использую событие остановки и ищу, когда позиция блока слева равна 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/

@RosesAreRed пометьте этот ответ как принятый, если он ответил на ваш вопрос, в противном случае оставьте отзыв о том, что не решено. Спасибо