複数の列でリンクを分割する

Question

私はその中にダイナミックなリンク数を持つメニューパネルを持っています。

このパネルの高さは固定高さ（変更可能）で、その高さに収まるリンク要素の数を計算したいと考えています。リンクの最大数に達すると、リンクリストをクリアし、.left,.center、.rightという3つの列に分割したいと思います。これは、リンク数が使用可能な高さを超えるパネルでのみ発生します。

リンクの

最初の部分は、リンクを超えると.centerに移動し、（最終的に）ここに私の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を取る必要があり、この場合だとしても

を.rightを占有する必要があり、.leftでなければなりません2番目の<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()); 

これは私がdivのリンクの最大数を持っているパネルを知らせるJS ..

ここフィドルです： https://jsfiddle.net/3ea670fh/2/

私はこれに固執しています、私は進める方法がわかりません。どんな助けや提案も大歓迎です。

私はこの質問を見ました：One UL list split into multi columns with fixed heightですが、CSSは私にとってはオプションではありません（IE8サポート）。

ありがとうございます！

Answer 1

1. 単一の列のカウント最大リンク
2. が次の列に

データプリペンドを移動し、リンクを超えて：それはリンクを超えたときにリンクを付加する次の列のID'S）

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

ここにはフィドルがあります

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