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

Answer 2

为什么不为此使用表格？如果您愿意，甚至可以使用DOM操作方法使用Javascript创建表。

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

2 个答案: