Bagaimanakah Saya Boleh Menyusun Div Ketinggian Boleh Ubah dalam Baris Kemas Menggunakan CSS dan JavaScript?

Div Terapung CSS pada Ketinggian Boleh Ubah

Cabarannya terletak pada menampung bilangan yang tidak terhingga div ketinggian berubah-ubah dalam induk lebar tetap, memastikan mereka menyusun diri mereka dalam barisan yang kemas seperti yang digambarkan dalam imej yang disediakan. Percubaan untuk menggunakan apungan atau ciri paparan blok sebaris telah terbukti mencabar disebabkan oleh variasi ketinggian.

Penyelesaian:

Malangnya, menyelesaikan isu ini semata-mata dengan CSS pada masa ini tidak dapat dilaksanakan dalam semua pelayar. Pendekatan terapung dan blok sebaris kedua-duanya mempunyai had. Penyelesaian berasaskan kedudukan memerlukan pelarasan piksel manual atau pergantungan pada kod sisi pelayan untuk penalaan piksel automatik.

jQuery Masonry to the Rescue:

Untuk mengendalikan situasi ini dengan berkesan, adalah disyorkan untuk menerima kuasa jQuery Masonry, perpustakaan yang direka khusus untuk mengatur dan menyusun elemen secara dinamik. Masonry secara automatik melaraskan susun atur div berdasarkan ketinggian dan ruang yang tersedia, menghasilkan susunan visual yang menarik dan responsif.

Pelaksanaan:

Untuk melaksanakan Masonry, cuma muat turun perpustakaan dan masukkannya ke dalam fail HTML anda. Kemudian, mulakan Masonry dengan bekas div anda sebagai sasaran:

var container = document.querySelector('#holder');
var mason = new Masonry(container, {});

Ini akan membolehkan Masonry menguruskan susunan div dalam bekas, memastikan ia diletakkan secara optimum tanpa mengira perbezaan ketinggiannya.

Manfaat jQuery Masonry:

• Automatik pelarasan susun atur elemen
• Sokongan untuk ketinggian elemen yang tidak teratur
• Respons dinamik pada saiz semula halaman
• Pelaksanaan yang mudah dan mesra pengguna

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyusun Div Ketinggian Boleh Ubah dalam Baris Kemas Menggunakan CSS dan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!