Question

我正在使用JqueryUI进行排序，以便我可以对块进行排序和重新排列。我试图让所有的高度均衡到每行的最大高度，因为我不知道每个块的高度，并且它们不断变化（因为它们是可排序的）。如何获得每行的最大高度？

以下是我正在使用的示例：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/

使用JqueryUI可排序时获取每行的高度

1 个答案: