Bagaimana untuk Meniru Reka Letak Susun Div Responsif Pinterest?

Mereplikasi Reka Letak Div ​​Mutlak Pinterest

Reka letak div unik Pinterest memberikan cabaran kepada pengaturcara yang ingin meniru fungsinya. JQuery dan CSS tersuai yang digunakan untuk melaraskan reka letak secara dinamik berdasarkan saiz semula penyemak imbas dan menghalang kebergantungan tindanan menegak membuatkan ramai tertanya-tanya bagaimana untuk mencapai hasil yang serupa.

Jawapan:

The prinsip teras di sebalik susun atur Pinterest melibatkan meletakkan bekas pin secara mutlak, menentukan lebar lajur dan saiz longkang, dan menggunakan tatasusunan untuk menjejaki ketinggian setiap lajur.

1. Bekas Pin Kedudukan:

Setiap bekas pin hendaklah diletakkan secara mutlak dalam bekas induk. Ini membolehkan pin individu diletakkan secara berasingan antara satu sama lain.

2. Mengira Saiz Lajur dan Longkang:

Tentukan lebar yang tersedia untuk bekas pin dan kira bilangan lajur yang sesuai dengan selesa. Gunakan lebar lajur yang terhasil dan saiz longkang yang dipratentukan untuk mengira parameter reka letak keseluruhan.

3. Penjejakan Ketinggian berasaskan tatasusunan:

Mulakan tatasusunan dengan panjang sama dengan bilangan lajur. Semasa anda mengulangi setiap pin, tentukan lajur yang mempunyai ketinggian terpendek pada masa itu. Simpan ketinggian ini dalam elemen tatasusunan yang sepadan.

4. Penempatan Pin:

Lelaran melalui setiap pin dan:

• Letakkannya dalam lajur dengan ketinggian terpendek (ditentukan oleh tatasusunan).
• Tetapkan Sifat CSS "kiri" kepada indeks lajur didarab dengan lebar lajur dan longkang.
• Tetapkan sifat CSS "atas" kepada ketinggian yang disimpan dalam tatasusunan untuk lajur yang dipilih.
• Kemas kini ketinggian lajur (nilai tatasusunan) dengan menambahkan ketinggian pin padanya.

Dengan mematuhi langkah-langkah ini, adalah mungkin untuk mencipta reka letak yang meniru gelagat responsif Pinterest dan algoritma peletakan pin yang cekap.

Atas ialah kandungan terperinci Bagaimana untuk Meniru Reka Letak Susun Div Responsif Pinterest?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!