Jquery 如何将嵌套导航拆分为高度几乎相等的列

我正在开发一个具有导航覆盖（节点和子节点）的响应性网站。对于桌面视图，导航应拆分为4列；对于平板电脑视图，导航应拆分为2列。这是一个嵌套的列表导航，因此在其周围构建了一个列。我的想法是，只需在1列中编写导航，并使用jquery将其动态排列为4或2列

html:

为平板电脑烧制：

$(".overlay > ul > li").arrangeObjects('ul', 2);

此解决方案将节点等分为列。不幸的是，这样看起来不太好：

我想要实现的是一个几乎相同柱高度的排列，如下所示：

---

我必须在某种程度上尊重子节点的数量，但我真的不知道如何实现这一点。也许任何人都有很好的建议，如果能提供一些帮助，我们将不胜感激。

首先，排序和分组应该尽可能地在后端进行，在这种情况下，应该如此

当您在每个列中对结果进行了排序和分组后，您可以将CSS3列与jQuery回退一起用于较旧的浏览器

---

但是，如果您坚持使用JavaScript进行所有操作，

---

它似乎提供了您需要的解决方案。不过，它是在不久前编写的，因此您可能需要修改部分内容以适应最新的jQuery版本，也可能需要稍加修改以满足您的需要。

好的。我知道了。这有点棘手。上一天我开始计算每一列的高度，但我相信这种方法更灵活：

    this.parent().each(function () {
        var $subnodes       = $(this).children();

        // true will cause counter increment
        // false will cause counter decrement
        var inc     = true;
        var cols    = [];

        for (var i = 0; i < maxCols; i++) {
            cols.push($('<ul></ul>'));
            cols[i].appendTo($(this));    
        }

        function sortByHeight(a, b) {
            return $(a).height() > $(b).height() ? 0 : 1;
        }

        $subnodes = $subnodes.sort(sortByHeight);

        var i = 0;
        $subnodes.each(function () {
            // logic for left and right boundry
            if (i < 0 || i === maxCols) {
                inc = !inc;
                // this will cause node to be added once again to the same column
                inc ? i++ : i--;
            }

            cols[i].append($(this));

            inc ? i++ : i--;
        });
    });

this.parent（）.each（函数）（）{
var$subnodes=$（this.children（）；
//true将导致计数器增量
//false将导致计数器减量
var inc=真；
var cols=[]；
对于（var i=0；i$（b）.height（）？0:1；
}
$subnodes=$subnodes.sort（排序权重）；
var i=0；
$subnodes.每个（函数（）{
//左右边界逻辑
如果（i<0 | | i==maxCols）{
inc=！inc；
//这将导致再次将节点添加到同一列中
inc？i++：i--；
}
cols[i].追加（$（this））；
inc？i++：i--；
});
});

---

这是一个概念。首先，我按高度（从最高点到最低点）对所有节点进行排序，然后将它们从左到右、从后附加到列（由maxCols指定）。它不如你的漂亮，不幸地打破了wrapAll的用法（我非常喜欢它）。我已经在做一个小优化，它将使用

threshold

参数。当最短列和最长列之间的高度差大于阈值时，最长列的最后一个元素将移动到最短列。那应该看起来更自然。让我知道这是否是您需要的。

似乎节点数只是您应该考虑的标准之一。您可能需要计算内部内容的数量。关于这些节点中可以找到的内容的更多信息将非常有用。我喜欢你的想法，我正在研究我的解决方案：）完成后我将与大家分享：）谢谢你的努力。您询问有关节点内容的更多信息，您确切的意思是什么？我的问题只是关于拆分导航条目（这就是我对“节点”的意思）。请让我知道我是否应该编辑上面的代码以获取更多信息。好的，你只需要导航，它是关于链接的：）我得到了更通用的解决方案，这就是为什么我要求提供内容的原因。我不能同意你。。。虽然排序可以在后端完成（在大多数情况下，这是一个更好的解决方案），但我认为分组似乎是一项前端工作链接到砖石插件。谢谢+1用于CSS教程中的伟大砌体。使用CSS是一个简单而快速的解决方案，但不幸的是，它并没有得到100%的支持。所以我选择了JavaScript，我们无论如何都要使用它。另一个布局库修复了几个砌体问题：）千谢，伙计：）这看起来是一个非常聪明的解决方案。我也有类似的想法，尤其是在使用阈值参数时。至少它失败了，因为它没有注意到小而重要的细节。我会尽快尝试一下你的美丽片段，然后回来！没问题：）很有趣；）首先，我祝你新年快乐op1ekun:）我尝试了你的解决方案，令我惊讶的是，它通过一对一的粘贴工作，很好的工作伙伴！这些街区的排列高度几乎相同，看起来好多了。唯一的问题是（这是我的错，因为我忘了提到）导航块应该遵守HTML中的顺序。我将尝试更改您的脚本以使其正常工作。如果你有解决这个问题的主要想法，那么最好更新解决方案，否则我会将其标记为已接受，因为你告诉我该怎么做。谢谢你。我会随时通知你的。太好了：）我很高兴能帮上忙！关于你的问题。这是否意味着排序不再是一个选项？…或者我们必须更改参数函数以根据顺序对高度进行排序？

$(".overlay > ul > li").arrangeObjects('ul', 4);

$(".overlay > ul > li").arrangeObjects('ul', 2);

.overlay {
    -moz-column-count: 4;
    -moz-column-gap: 10px;
    -webkit-column-count: 4;
    -webkit-column-gap: 10px;
    column-count: 4;
    column-gap: 10px;
}

    this.parent().each(function () {
        var $subnodes       = $(this).children();

        // true will cause counter increment
        // false will cause counter decrement
        var inc     = true;
        var cols    = [];

        for (var i = 0; i < maxCols; i++) {
            cols.push($('<ul></ul>'));
            cols[i].appendTo($(this));    
        }

        function sortByHeight(a, b) {
            return $(a).height() > $(b).height() ? 0 : 1;
        }

        $subnodes = $subnodes.sort(sortByHeight);

        var i = 0;
        $subnodes.each(function () {
            // logic for left and right boundry
            if (i < 0 || i === maxCols) {
                inc = !inc;
                // this will cause node to be added once again to the same column
                inc ? i++ : i--;
            }

            cols[i].append($(this));

            inc ? i++ : i--;
        });
    });