Bagaimana untuk Memaparkan Senarai Tidak Tertib dalam Dua Lajur Menggunakan CSS dan JavaScript?

Memaparkan Senarai Tidak Tertib dalam Dua Lajur

Pelayar Moden

Untuk memaparkan senarai tidak tertib dalam dua lajur dalam penyemak imbas moden , gunakan lajur CSS3 modul:

CSS:

ul {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}

[JSFiddle Demo](http://jsfiddle.net/HP85j/8/)

Pelayar Legasi

Untuk sokongan Internet Explorer, JavaScript dan manipulasi DOM adalah perlu:

HTML:

<div>
    <ul class="columns" data-columns="2">
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
        <li>E</li>
        <li>F</li>
        <li>G</li>
    </ul>
</div>

JavaScript (jQuery):

(function ($) {
    var initialContainer = $('.columns'),
        columnItems = $('.columns li'),
        columns = null,
        column = 1; // account for initial column
    function updateColumns() {
        column = 0;
        columnItems.each(function (idx, el) {
            if (idx !== 0 && idx > (columnItems.length / columns.length) + (column * idx)) {
                column += 1;
            }
            $(columns.get(column)).append(el);
        });
    }
    function setupColumns() {
        columnItems.detach();
        while (column++ < initialContainer.data('columns')) {
            initialContainer.clone().insertBefore(initialContainer);
            column++;
        }
        columns = $('.columns');
    }

    $(function () {
        setupColumns();
        updateColumns();
    });
})(jQuery);

CSS:

.columns {
    float: left;
    position: relative;
    margin-right: 20px;
}

Nota: Fungsi JavaScript awal menyusun lajur sebagai berikut:

A  E
B  F
C  G
D

Untuk memesan lajur seperti yang diminta oleh OP:

A  B
C  D
E  F
G

Ubah suai fungsi UpdateColumns kepada:

function updateColumns() {
    column = 0;
    columnItems.each(function (idx, el) {
        if (column > columns.length) {
            column = 0;
        }
        $(columns.get(column)).append(el);
        column += 1;
    });
}

Atas ialah kandungan terperinci Bagaimana untuk Memaparkan Senarai Tidak Tertib dalam Dua Lajur Menggunakan CSS dan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!