Bagaimana untuk Mencapai Susun Atur Susun Div Fleksibel seperti Pinterest?

Cara Meniru Reka Letak Susun Div Fleksibel Pinterest

Reka letak tersendiri Pinterest dicapai melalui gabungan kedudukan mutlak dan JavaScript dan CSS tersuai. Dengan memanfaatkan kedudukan mutlak, pin tidak dikekang oleh ketinggian lajur bersebelahan, membenarkan reka letak yang fleksibel dan responsif yang melaraskan dengan lancar kepada saiz semula penyemak imbas.

Untuk meniru reka letak ini:

• Letakkan bekas pin secara mutlak.
• Tentukan lebar lajur dan jidar (longkang).
• Mulakan tatasusunan dengan panjang yang sama dengan bilangan lajur untuk mewakili ketinggian setiap lajur.

Semasa pin ditambah:

• Tetapkan setiap pin pada lajur terpendek.
• Kira kedudukan kiri sebagai nombor lajur didarab dengan lebar lajur dan ditambah dengan longkang.
• Kira kedudukan teratas sebagai ketinggian lajur terpendek.
• Kemas kini ketinggian lajur terpendek dalam tatasusunan.

Ini pendekatan mencipta susun atur dinamik di mana pin disusun secara menegak tanpa dihadkan oleh ketinggian lajur bersebelahan. Hasilnya ialah reka bentuk yang sangat cekap dan responsif yang menampung bilangan pin yang berbeza-beza sambil mengekalkan pengalaman pengguna yang konsisten merentas resolusi skrin yang berbeza.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Susun Atur Susun Div Fleksibel seperti Pinterest?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!