javascript - 在多列中拆分链接

Question

我有一个菜单面板，其中包含动态数量的链接。

该面板的高度具有固定高度(可以更改)，我想计算该高度可以容纳多少个链接元素。当达到最大链接数时，我希望链接列表自行清除并分成 3 个名为 .left 的列。 , .center和 .right .这仅发生在链接数超过可用高度的面板中。

链接的第一部分必须在.left中, 超出链接则应移至 .center并(最终)占据.right还有

这是我的html结构

<div class="right-menu-panel" style="height:250px">
  <div class="secondary-nav">
    <div class="menu-element">
      <a href="" class="secondary-menu-link">link</a>
      <a href="" class="secondary-menu-link">link</a>
      <a href="" class="secondary-menu-link">link</a>
      <a href="" class="secondary-menu-link">link</a>
    </div>
    <div class="menu-element">
      <a href="" class="secondary-menu-link">link</a>
      <a href="" class="secondary-menu-link">link</a>
      <a href="" class="secondary-menu-link">link</a>
      <a href="" class="secondary-menu-link">link</a>

      <a href="" class="secondary-menu-link">link</a>
      <a href="" class="secondary-menu-link">link</a>
      <a href="" class="secondary-menu-link">link</a>
      <a href="" class="secondary-menu-link">link</a>

      <a href="" class="secondary-menu-link">link</a>
      <a href="" class="secondary-menu-link">link</a>
      <a href="" class="secondary-menu-link">link</a>
      <a href="" class="secondary-menu-link">link</a>

      <a href="" class="secondary-menu-link">link</a>
      <a href="" class="secondary-menu-link">link</a>
    </div>
    <div class="menu-element">
      <a href="" class="secondary-menu-link">link</a>
    </div>
  </div>
</div>

在这种情况下，javascript 应该只在第二个 <div class="menu-element"> 中采取行动其中有 14 个链接。

我已经开始使用这个 JS，但我被困在这里:

var menuHeight = $(".right-menu-panel").outerHeight();
var menuItems = Math.max.apply(null, $('.secondary-nav > div').map(function() {
  return $(this).children().length;
}).get());

这个 js 让我知道哪个面板有最多的 div 链接..

这是一个 fiddle :https://jsfiddle.net/3ea670fh/2/

我坚持这个，我不知道如何进行。非常感谢任何帮助或建议。

我看过这个问题:One UL list split into multi columns with fixed height但 css 不是我的选择(IE8 支持)。

非常感谢!

Answer 1

1. 计算单列中的最大链接数
2. 超出链接，移至下一列

data-prepend:当链接超过时，它是下一列的ID，用于前置链接)

$.each(indexer, function(idx, elem) {
    var prepend = $(menuElements[elem]).attr('data-prepend');
    if ($(menuElements[elem]).children().length > maxItems) {
        var items = $(menuElements[elem]).children().slice(maxItems).detach();
        $('#' + prepend).prepend(items);
    }
});

这是一个 fiddle

https://jsfiddle.net/SeokjunHong/q5frqrds/