Wie erstelle ich eine mehrspaltige Liste?

Ich habe eine “Bestellte Liste”, die ungefähr 100 “Listenelemente” enthält. Dadurch wird meine Seite sehr lang und die Benutzer müssen zu viel scrollen.

Wie kann ich den UL so anzeigen lassen:

1.           6.           11.
2.           7.           12.
3.           8.           13.
4.           9.           14.
5.          10.           15.

Wenn Sie sich nicht für die vertikale Reihenfolge interessieren, sondern nur für das Layout:

1.      2.      3.       4.
5.      6.      7.       8.
9.      10.     11.      12.

Sie können die li-Elemente einfach so setzen:

li {
    display: block;
    width: 25%;
    float: left;
}

Es sollte funktionieren. Wenn Sie sie in vertikaler Reihenfolge haben müssen, müssen Sie im PHP-Skript handeln, indem Sie sie in separate Divs unterteilen und sie dann schweben lassen.

Du könntest die verwenden CSS Modul für mehrspaltiges Layout. Sie können den Support unter überprüfen Kann ich benutzen.

Ich konnte die richtige Reihenfolge mit ein wenig jQuery erhalten:

function splitList($list, n) {
    var i, k;
    var colHeight = Math.ceil($list.children().length / n)
    var colWidth = Math.floor(100 / n) + "%"

    for (i = 0; i < n; i++) {
        $list.append("<ul class="liCol"></ul>")
        for (k = 0; k < colHeight; k++) {
            $list.children("li").eq(0).appendTo(".liCol:last")          
        }   
    }

    $(".liCol").css("width", colWidth)
    $list.show() // list originally hidden to avoid displaying before ready
}

grundlegende Stile für .liCol:

.liCol {
    padding: 0px;
    margin: 0px;
    float: left;
}

Wenn Sie ein mehrspaltiges CSS-Layout verwenden, können Sie dies folgendermaßen tun:

ul {
    list-style-type: none;
    counter-reset: section;
    -moz-column-count: 3;
    -moz-column-gap: 20px;
    -webkit-column-count: 3;
    -webkit-column-gap: 20px;
    column-count: 3;
    column-gap: 20px;
}

ul li {
    padding-left: 30px;
    position: relative;
}

ul li:before {
    counter-increment: section;
    content: counter(section) ".";
    margin: 0 0 0 -34px;
    text-align: right;
    width: 2em;
    display: inline-block;
    position: absolute;
    height: 100%;
}

<ul>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
</ul>

JSFiddle-Demo

Ich habe eine Lösung erstellt, die auch für geordnete (nummerierte) Listen funktioniert. Diese Listen müssen fortlaufend durch die Spalten nummeriert werden.

Fügen Sie Ihrer Seite folgendes Skript hinzu (egal wo, am besten in einer separaten js-Datei):

<script type="text/javascript">
// As soon as the document's structure has been loaded:
document.addEventListener( "DOMContentLoaded", function() {
    // For each html elem:
    elems = document.getElementsByTagName("*"); // OL and UL wanted: chose all (*) here and select later.
    for ( var e = 0; e < elems.length; e++ ) {
        // Check if elem is a list (ordered/unordered) and has class name "cols":
        if ( ( elems[e].tagName == "OL" || elems[e].tagName == "UL" ) && elems[e].className.search("cols") > -1 ) {
            // Collect list items and number of columns (from the rel attribute):
            var list = elems[e];
            var listItems = list.getElementsByTagName("LI");
            var Ncols = list.getAttribute("rel")*1; // *1 converts rel from string to int.
            // Determine total number of items, items per column and column width:
            var Ntotal = listItems.length;
            var Npercol = Math.ceil( Ntotal/Ncols );
            var colWidth = Math.floor( 100/Ncols )+"%";
            // For each column:
            for ( var c = 0; c < Ncols; c++ ) {
                // Create column div:
                var colDiv = document.createElement("DIV");
                colDiv.style.cssFloat = "left";
                colDiv.style.width = colWidth;
                // Add list items to column div:
                var i_start = c*Npercol;
                var i_end = Math.min( (c+1)*Npercol, Ntotal );
                for ( var i = i_start; i < i_end; i++ )
                    colDiv.appendChild( listItems[0] ); // Using listItems[0] instead of listItems[i], because items are moved to colDiv!
                // Add column div to list:  
                list.appendChild( colDiv );
            }
        }
    }
} );
</script>

Dann können Sie einfach mehrere Spaltenlisten wie folgt erstellen:

<ol class="cols" rel="3">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
    <li>F</li>
    <li>G</li>
</ol>

Setzen Sie also class=”cols” und rel=”[number_of_columns]” und das Drehbuch erledigt den Rest!

Sie können 2D-Transformationen verwenden: Sie werden von modernen Browsern besser unterstützt als CSS3-Spalten. Siehe meine Antwort hier

2-Zeilen-Element-Layout innerhalb horizontaler Div

Da ich das gleiche Problem hatte und nichts “sauberes” finden konnte, dachte ich, ich hätte meine Lösung gepostet. In diesem Beispiel verwende ich eine umgekehrte while Schleife, damit ich verwenden kann splice Anstatt von slice. Der Vorteil ist jetzt, dass splice() nur einen Index und einen Bereich benötigt, während Slice() einen Index und die Gesamtsumme benötigt. Letzteres wird beim Loopen tendenziell schwierig.

Nachteil ist, dass ich den Stapel beim Anhängen umkehren muss.

Beispiel:

Spalten = 4; Anzahl = 35

for-Schleife mit Slice = [0, 9]; [9, 18]; [18, 27]; [27, 35]

umgekehrt während mit splice = [27, 8]; [18, 9]; [9, 9]; [0, 9]

Code:

// @param (list): a jquery ul object
// @param (cols): amount of requested columns
function multiColumn (list, cols) {
    var children = list.children(),
        target = list.parent(),
        liCount = children.length,
        newUl = $("<ul />").addClass(list.prop("class")),
        newItems,
        avg = Math.floor(liCount / cols),
        rest = liCount % cols,
        take,
        stack = [];

    while (cols--) {
        take = rest > cols ? (avg + 1) : avg;
        liCount -= take;

        newItems = children.splice(liCount, take);
        stack.push(newUl.clone().append(newItems));
    }

    target.append(stack.reverse());
    list.remove();
}