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

【问题标题】：jQuery UI Sortable items in one line should have the same height一行中的 jQuery UI 可排序项目应具有相同的高度
【发布时间】：2013-07-31 23:35:18
【问题描述】：

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

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

【问题讨论】：

标签： css jquery-ui css-float height jquery-ui-sortable

【解决方案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 demo!

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

简单地说，没有。

【讨论】：

【解决方案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)] 来为每个预告片获取正确的高度值。

【讨论】：