如何按平均高度在三列中订购动态站点地图？

Question

我有站点地图，我想按avarage高度订购三列中的项目，但它必须是动态的。如果新项目添加/删除到任何菜单，它将再次重新排序。请看图像三列的高度是一样的。我怎样才能在jquery中编写代码？

与默认菜单项一样：

在菜单中添加/删除项目后，reoerder将如下所示：

或其他示例

此代码无序：

<style>
        div { width: 33.333333%; float: left; }
    </style>
<ul>
        <li>
            <h4>Menu 1</h4>
        </li>
        <li>Child 1</li>
        <li>Child 2</li>
    </ul>
    <ul>
        <li>
            <h4>Menu 2</h4>
        </li>
        <li>Child 1</li>
        <li>Child 2</li>
        <li>Child 3</li>
        <li>Child 4</li>
    </ul>
    <ul>
        <li>
            <h4>Menu 3</h4>
        </li>
        <li>Child 1</li>
        <li>Child 2</li>
        <li>Child 3</li>
        <li>Child 4</li>
        <li>Child 5</li>
    </ul>    
    <ul>
        <li>
            <h4>Menu 4</h4>
        </li>
        <li>Child 1</li>
        <li>Child 2</li>
        <li>Child 3</li>
        <li>Child 4</li>
        <li>Child 5</li>
        <li>Child 6</li>
        <li>Child 7</li>
    </ul>
    <ul>
        <li>
            <h4>Menu 5</h4>
        </li>
        <li>Child 1</li>
    </ul>

重新排序后，项目将在div中，如下所示：

<style>
        div { width: 33.333333%; float: left; }
    </style>
<div>
        <ul>
            <li>
                <h4>Menu 1</h4>
            </li>
            <li>Child 1</li>
            <li>Child 2</li>
        </ul>
        <ul>
            <li>
                <h4>Menu 2</h4>
            </li>
            <li>Child 1</li>
            <li>Child 2</li>
            <li>Child 3</li>
            <li>Child 4</li>
        </ul>        
    </div>
    <div>
        <ul>
            <li>
                <h4>Menu 3</h4>
            </li>
            <li>Child 1</li>
            <li>Child 2</li>            
            <li>Child 3</li>
            <li>Child 4</li>
            <li>Child 5</li>
        </ul>        
        <ul>
            <li>
                <h4>Menu 5</h4>
            </li>
            <li>Child 1</li>
        </ul>
    </div>    
    <div>        
        <ul>
            <li>
                <h4>Menu 4</h4>
            </li>
            <li>Child 1</li>
            <li>Child 2</li>
            <li>Child 3</li>
            <li>Child 4</li>
            <li>Child 5</li>
            <li>Child 6</li>
            <li>Child 7</li>
        </ul>
    </div>