Javascript 多列HTML列表，第一列中有一定数量的项目？

我在这里和其他各种网站上浏览了一下，制作了一个多列列表，效果很好

我想知道的是，假设我有一个动态列表，例如，如果有10个列表项，我想在第一列保留其中的8个，在第二列保留其余的，也就是说，如果有8个以上的列表项，则在第一列中始终保留8个

我假设这仅用CSS/HTML是不可能的，那么我能用JavaScript/jQuery做些什么吗？我更喜欢把插件的数量控制在最低限度

---

提前谢谢。

你为什么不用桌子来做这个？如果愿意，您甚至可以使用DOM操纵方法使用Javascript创建表。

假设生成的HTML页面包含：

<ul>
    <li class="item1">A</li>
    <li class="item2">B</li>
    <li class="item3">C</li>
    <li class="item4">D</li>
    <li class="item5">E</li>
    <li class="item6">F</li>
    <li class="item7">G</li>
    <li class="item8">H</li>
    <li class="item9">I</li>
    <li class="item10">J</li>
    <li class="item11">K</li>
    <li class="item12">L</li>
    <li class="item13">M</li>
    <li class="item14">N</li>
    <li class="item15">O</li>
</ul>

---

听起来像是可以在服务器端轻松完成的事情。我无法控制HTML的生成方式（SharePoint导航）。您是否使用任何逻辑构建列表项，我的意思是这是任何算法的一部分。作为另一个HTML/js noob，很高兴知道为什么这是一个被否决的答案。在表格中插入内容似乎是解决这个问题的合理方法。@worldsayshi：如果你真的不想更改文档结构，你基本上被迫在接受的答案中使用这种方法。如果您同意修改文档结构，您可以使用一个表，或者可以为两个部分中的每一部分使用单独的div，将子项放在其中。

/*
    unorderedList: the HTML ul element
    columnSize:    the number of items per column
    columnGap:     the distance between 2 columns in ems
    offset:        the offset of the first column in ems
*/

function generateMultiColumnLayout(unorderedList, columnSize, columnGap, offset) {
    var items = unorderedList.getElementsByTagName("li");

    for (var i = 0, l = items.length; l--; i++) {
        var itemStyle = items[i].style;
        itemStyle.lineHeight = "1.2em";

        if (!i && i % columnSize) {                   // old column
            itemStyle.marginLeft = offset + "em";
        } else {                                      // start of new column
            offset += columnGap;
            itemStyle.marginLeft = offset + "em";
            itemStyle.marginTop = -columnSize + "em";
        }
    }
}

window.onload = function () {
    var items = document.getElementsByClassName("item1");

    for (var i = 0, l = items.length; l--; i++) {
        generateMultiColumnLayout(items[i].parent, 8, 10, 5);
    }
};