Bagaimanakah Saya Boleh Membuat Reka Letak Gaya Masonry Menggunakan CSS (dan Alternatif JavaScript)?

Mencipta Reka Letak Gaya Masonry dengan CSS

Ramai pereka web berusaha untuk mencipta reka letak di mana blok kandungan disusun dalam lajur, dengan setiap blok menyesuaikan diri dengan ketinggiannya sendiri sambil mengekalkan penampilan yang konsisten dan estetik. Ini dikenali sebagai reka letak gaya batu.

Pada masa lalu, CSS sahaja tidak dapat mencapai kesan ini dengan berkesan. Walau bagaimanapun, dengan kemunculan CSS3, kami kini mempunyai penyelesaian yang mudah.

Penyelesaian CSS3

CSS3 memperkenalkan konsep susun atur berbilang lajur, membolehkan pembangun menentukan bilangan lajur dan jarak antaranya. Dengan menetapkan sifat kiraan lajur dan jurang lajur, kami boleh mencipta reka letak gaya batu.

Sebagai contoh, kod CSS berikut mentakrifkan bekas dengan dua lajur dan jurang 10 piksel antaranya:

.container {
    column-count: 2;
    column-gap: 10px;
    width: 360px;
}

Setiap item di dalam bekas kemudiannya akan dipaksa untuk menduduki 100% daripada lebar yang tersedia dalam lajur. Ini bermakna bongkah dengan ketinggian berbeza akan disusun secara menegak, mewujudkan penampilan gaya batu yang diingini.

Penyelesaian Bukan CSS3

Jika projek anda tidak menyokong CSS3, anda perlu menggunakan JavaScript untuk mencapai reka letak gaya batu. Terdapat beberapa perpustakaan JavaScript yang tersedia, seperti Masonry dan Isotope, yang boleh digunakan untuk membuat reka letak ini.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Reka Letak Gaya Masonry Menggunakan CSS (dan Alternatif JavaScript)?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!