Bagaimana untuk Memaparkan Senarai Tidak Tertib dalam Dua Lajur Merentasi Pelayar Moden dan Legasi?

Cara Memaparkan Senarai Tidak Tertib dalam Dua Lajur

Pengenalan

Soalan ini meneroka kaedah untuk mempersembahkan senarai tidak tertib merentas dua lajur, terutamanya untuk paparan dalam pelayar lama seperti Internet Explorer.

Moden Pelayar

Dalam pelayar moden, modul lajur CSS3 menyediakan sokongan untuk mencipta lajur. Dengan menggunakan modul ini, anda boleh mencapai reka letak yang diingini seperti berikut:

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

Pelayar Warisan

Untuk pelayar lama, penyelesaian berasaskan JavaScript yang melibatkan manipulasi DOM diperlukan apabila kandungan berubah. Penyelesaian ini menggunakan jQuery untuk ringkasan:

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:

(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:
Pada mulanya, penyelesaian ini akan menyusun lajur seperti berikut:

A  E
B  F
C  G
D

Soalan asal meminta pesanan seperti ini sebaliknya:

A  B
C  D
E  F
G

Untuk varian ini, laraskan kod JavaScript 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 Bagaimana untuk Memaparkan Senarai Tidak Tertib dalam Dua Lajur Merentasi Pelayar Moden dan Legasi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!