Bagaimanakah Saya Boleh Mencipta Div Terapung Ketinggian Boleh Ubah dalam CSS Menggunakan Masonry jQuery?

Mencipta Div Terapung Ketinggian Boleh Ubah dalam CSS: Panduan Komprehensif

Mencapai div terapung ketinggian berubah-ubah dalam CSS memberikan cabaran yang ketara. Percubaan untuk menggunakan apungan atau paparan: inline-block telah terbukti tidak berjaya disebabkan oleh pengehadan yang wujud.

Batasan Pendekatan Konvensional

• Apungan: Div terapung hanya boleh dijajarkan bersebelahan antara satu sama lain secara mendatar, mengakibatkan tidak sekata baris dengan kehadiran ketinggian berubah-ubah.
• Paparan: Blok Sebaris: Elemen blok sebaris tidak boleh dibalut secara automatik ke baris baharu, menyebabkan div yang lebih tinggi melangkaui sempadan bekas induk.

Penyelesaian Alternatif: jQuery Masonry

Untuk mengatasi batasan ini, penyelesaian yang popular ialah jQuery Masonry. Pemalam JavaScript ini secara dinamik mengira lebar lajur minimum dan mengoptimumkan susunan div berdasarkan ketinggian lajur tertinggi. Akibatnya, div dengan ketinggian yang berbeza dijajarkan dengan indah dalam lajur tanpa penalaan piksel manual atau pengiraan yang rumit.

Pelaksanaan

Langkah berikut menggambarkan cara menggunakan Batu jQuery:

1. Sertakan jQuery dan jQuery Masonry dalam Dokumen HTML.
2. Tambahkan gaya CSS pada bekas induk untuk menentukan lebarnya dan sifat paparan.
3. Mulakan Masonry pada bekas induk menggunakan pemalam Masonry, memberikannya sebagai hujah ID bekas atau kelas.

Contoh Kod

  <script src="https://unpkg.com/jquery@3.6.0/dist/jquery.min.js"></script>
  <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>


  <div><p>Dengan memanfaatkan jQuery Masonry, pembangun boleh dengan mudah mencapai pembolehubah ketinggian div terapung dalam CSS, memastikan reka letak yang elegan dan responsif tanpa mengira ketinggian elemen.</p></div>

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Div Terapung Ketinggian Boleh Ubah dalam CSS Menggunakan Masonry jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!