javascript - 多列 HTML 列表，第一列中有一定数量的元素？

Question

我在这里看过http://novitskisoftware.com/test/multiplecolumnsEms.html并在其他各种网站制作多列列表，效果很好。

我想知道的是，假设我有一个动态列表，如果有 10 个列表项，我想将其中的 8 个保留在第一列中，其余的保留在第二列中，即第一列中始终有 8 个元素，如果有 8 个以上。

我认为仅使用 CSS/HTML 是不可能的，那么我可以使用 JavaScript/jQuery 来实现吗？我更喜欢将插件的数量保持在最低限度。

提前致谢。

Answer 1

假设生成的 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>

您现在可以使用 JavaScript 生成所需的 CSS，如下所示:

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