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

Question

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

html:

<!-- overlay -->
<nav class="overlay"> 
    <!-- ul for column -->
    <ul>
        <!-- nodes & subnodes -->
        <li><a href="#">node</a>
            <ul>
                <li><a href="#">subnode</a></li>
                <li><a href="#">subnode</a></li>
                <li><a href="#">subnode</a></li>
                <li><a href="#">subnode</a></li>
            </ul>
        </li>
        <li><a href="#">node</a>
            <ul>
                <li><a href="#">subnode</a></li>
                <li><a href="#">subnode</a></li>
                <li><a href="#">subnode</a></li>
                <li><a href="#">subnode</a></li>                    
                <li><a href="#">subnode</a></li>
                <li><a href="#">subnode</a></li>
                <li><a href="#">subnode</a></li>
                <li><a href="#">subnode</a></li>
            </ul>
        </li>
        <li><a href="#">node</a> ...
    </ul>
</nav>

我写了这个函数：

    $.fn.arrangeObjects = function(wrapWith, maxCols) {

        this.each(function() {
            if ($(this).parent(wrapWith).length) $(this).unwrap();
        });

        this.parent().each(function() {
            var $el = $(this).children();
                amount = $el.length,
                wrapAmount = amount / maxCols;

            for (var i = 0; i < amount; i += wrapAmount) {
                $el.slice(i, i + wrapAmount).wrapAll('<'+ wrapWith +'/>');
            }
        });
    };

为台式机而生：

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

为平板电脑拍摄：

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

此解决方案将节点等分拆分为列。不幸的是，这样看起来不太好：
http://bern09.ch/notgood.png

我想要实现的是具有几乎相同的列高的排列，如下所示：
http://bern09.ch/good.png

我必须以某种方式尊重子节点的数量，但我真的不知道如何实现这一点。也许有人有很好的提示，我们将不胜感激。

Answer 1

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

当您在 UL 的每一列中对结果进行排序和分组后，您可以将 CSS3 列与旧浏览器的 jQuery 后备一起使用，explained here。

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

---

但是，如果你坚持使用 JavaScript 来做所有事情，you could use Multi Column List jQuery plugin.
它似乎提供了您需要的解决方案。但是它是在不久前编写的，因此您可能需要针对最新的 jQuery 版本修改其中的部分内容，并且可能会稍微满足您的需求。

Answer 2

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

    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--;
        });
    });

这是一个概念。首先，我按所​​有节点的高度（从最高到最低）对所有节点进行排序，然后将它们附加到从左到右再到后的列（由 maxCols 指定）。它不如你的漂亮，不幸的是打破了 wrapAll 的使用（我非常喜欢它）。我已经在进行一个小优化，它将使用threshold 参数。当最短和最长列之间的高度差大于阈值时，最长列的最后一个元素将移动到最短列。那么它应该看起来更自然。让我知道这是否是您正在寻找的。​​p>