Bagaimanakah Saya Boleh Memaparkan Senarai Tidak Tertib dalam Dua Lajur Menggunakan CSS dan JavaScript?

Memaparkan Senarai Tidak Tertib dalam Dua Lajur

Pengenalan

Untuk penyemak imbas moden, pendekatan utama untuk memaparkan senarai tidak tertib dalam dua lajur melibatkan penggunaan Modul lajur CSS3. Walau bagaimanapun, untuk penyemak imbas lama seperti Internet Explorer, penyelesaian berasaskan JavaScript diperlukan.

Pelayar Moden

Menggunakan modul lajur CSS3, anda hanya boleh menambah peraturan CSS berikut untuk mencapai yang diingini kesan:

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

Pelayar Warisan

Untuk penyemak imbas lama, anda boleh menggunakan penyelesaian JavaScript yang melibatkan manipulasi DOM. Berikut ialah contoh kod JavaScript menggunakan jQuery:

$(function(){
    var initialContainer = $('.columns'),
        columnItems = $('.columns li'),
        columns = null,
        column = 1;

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

    function setupColumns(){
        columnItems.detach();
        while (column++ <p>Dan inilah CSS yang sepadan:</p><pre class="brush:php;toolbar:false">.columns{
    float: left;
    position: relative;
    margin-right: 20px;
}

Pilihan Paparan Varian

Kod yang disediakan di atas menghasilkan lajur berikut susunan:

A  E
B  F
C  G
D

Untuk mencapai susun atur varian yang diminta oleh OP:

A  B
C  D
E  F
G

Ubah suai fungsi updateColumns() seperti berikut:

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 Bagaimanakah Saya Boleh Memaparkan Senarai Tidak Tertib dalam Dua Lajur Menggunakan CSS dan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!