css - 一行中的 jQuery UI 可排序项目应具有相同的高度

Question

我使用 jQuery UI Sortable 对预告片进行排序。问题在于，有时预告片包含不同数量的文本。（红色是文字。）因此，如果有超过一行的预告片，就会发生这种情况： 但我想要的是： 预告片应该与该行中最高的预告片具有相同的高度。给他们同样的高度是没有选择的。每行的最大预告片数始终为 3。

有没有比测量每行最高预告片的高度并在每次排序后使用 jQuery 调整其他预告片的高度更简单的方法？

Answer 1

$(function () {
    $('li').addClass('teaser');
    $('.sortable').sortable();
    $('#fixHeights').click(function () {
        var heights = [];
        $('.teaser').each(function () {
            heights.push($(this).height());
        });
        heights.sort();
        var tallest = heights.pop();
        alert(tallest); // optional
        $('.teaser').each(function () {
            $(this).height(tallest);
        })
    });
});

jsFiddle 演示！

有没有比测量每行最高预告片的高度并在每次排序后使用 jQuery 调整其他预告片的高度更简单的方法？

简单地说，没有。

Answer 2

基于 DevIshOnes 的回答，这是我的解决方案：

var heights = [];
var tallest = [];
$('.teaser:not(.ui-sortable-placeholder)').each(function () {
  $(this).height('auto');
  heights.push($(this).height());
});
while (heights.length != 0) {
  var line = heights.splice(0,3);
  line.sort(function(a,b){return b-a});
  tallest.push(line[0]);
}
$('.teaser').each(function (i) {
  $(this).height(tallest[Math.floor(i/3)]);
});

为了获得每行中最高的预告片，我生成了tallest数组，然后我用它tallest[Math.floor(i/3)]来获取每个预告片的正确高度值。