Bagaimanakah Pinterest Mencapai Reka Letak Responsifnya Dengan Penimbunan Div?

Cara Reka Letak Susun Div Pintar Pinterest Menyesuaikan Diri dengan Saiz Penyemak Imbas Berbeza

Susun atur visual menarik Pinterest telah memainkan peranan penting dalam kejayaannya sebagai sosial platform media. Aspek utama reka letak ini ialah keupayaan untuk lajur melaraskan nombor dan tindanan secara menegak, tanpa mengira ketinggian lajur bersebelahan.

Behind the Scenes: jQuery tersuai dan CSS

Kod tapak web mendedahkan bahawa reka letak ini dicapai menggunakan kedudukan div mutlak. Walau bagaimanapun, seperti yang dinyatakan oleh pengasas bersama di Quora, Pinterest menggunakan jQuery dan CSS tersuai untuk mengawal gelagat reka letak.

Layout Blueprint

Skrip jQuery, dengan bijak direka, bergantung pada prinsip berikut:

1. Mutlak Kedudukan: Setiap bekas pin diletakkan secara mutlak, membenarkan kawalan tepat ke atas peletakan.
2. Pengiraan Lebar Lajur: Skrip mengira lebar setiap lajur berdasarkan saiz induk bekas dan bilangan lajur yang dikehendaki.
3. Margin Antara Lajur: Nilai longkang ditakrifkan, mewakili jidar antara lajur bersebelahan.
4. Susun Tinggi: Tatasusunan dicipta untuk menyimpan ketinggian setiap lajur, yang akan digunakan untuk tentukan tindanan menegak.
5. Gelung Melalui Pin: Apabila pin baharu ditambah, skrip akan berulang melalui setiap satu, meletakkannya dalam lajur terpendek.
6. Menetapkan Koordinat: Setiap kedudukan kiri pin ditetapkan kepada indeks lajur masing-masing didarab dengan lebar lajur ditambah longkang. Kedudukan atasnya sepadan dengan ketinggian lajur terpendek pada kejadian itu.
7. Pelarasan Ketinggian: Selepas meletakkan pin, ketinggiannya ditambah pada ketinggian lajur yang dipilih dalam tatasusunan.

Faedah Reka Letak Tersuai

Tersuai ini reka letak menawarkan beberapa kelebihan:

• Responsif: Reka letak melaraskan secara automatik berdasarkan perubahan saiz penyemak imbas, memberikan pengalaman tontonan yang optimum.
• Tindan Menegak: Bebas daripada ketinggian lajur bersebelahan, pin disusun secara menegak, mencipta grid seperti kesan.
• Kecekapan: Skrip sangat cekap, mengurangkan masa yang diperlukan untuk susun atur berbilang pin pada halaman.

Atas ialah kandungan terperinci Bagaimanakah Pinterest Mencapai Reka Letak Responsifnya Dengan Penimbunan Div?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!