Memahami Layout Masonry - Sitepoint

Landskap reka bentuk web moden sentiasa berkembang. Senarai berasaskan meja dan penomboran mengimbangi menjadi usang, manakala susun atur batu dengan menatal tak terhingga semakin popular. Artikel ini menyelidiki selok -belok susun atur batu dan aplikasi mereka.

Takeaways utama:

• Susun atur batu, yang juga dikenali sebagai susun atur gaya Pinterest, adalah susun atur grid berasaskan lajur tanpa baris ketinggian tetap. Ia memaksimumkan ruang dengan meminimumkan jurang.
• Kegunaan biasa termasuk galeri imej, catatan blog, dan portfolio, terutamanya bermanfaat apabila item mempunyai dimensi yang berbeza -beza.
• Membuat susun atur batu sering memerlukan pengiraan yang kompleks; Menggunakan plugin pada umumnya lebih cekap. Pilihan popular termasuk batu, wookmark, isotop, bersarang, dan freetile.js.
• Ciri -ciri plugin untuk dipertimbangkan termasuk saiz lajur dinamik, penyortiran/penapisan, animasi, pengendalian elemen dinamik, dan pilihan penyesuaian susun atur.

Memahami susun atur batu:

Istilah "susun atur batu" mungkin berasal dari plugin jquery jquery yang popular. Juga dikenali sebagai susun atur gaya Pinterest (kerana penggunaan awal Pinterest), ia adalah grid berasaskan lajur yang, tidak seperti grid tradisional, mengelakkan baris ketinggian tetap. Penggunaan ruang yang dioptimumkan ini mengurangkan jurang yang tidak perlu. Susun atur berasaskan terapung CSS tradisional, sementara biasa, tidak mengambil kira saiz elemen, menambah unsur-unsur secara mendatar kemudian secara menegak, yang membawa kepada jarak yang tidak cekap.

Sebaliknya, susun atur batu secara dinamik menyesuaikan, meminimumkan ruang terbuang dan meningkatkan daya tarikan visual.

susun atur batu dalam tindakan:

susun atur batu digunakan secara meluas:

Pinterest:
• contoh gambar pinterest
thewall:
• THEWALL Contoh imej
fotografi Erik Johansson:
• erik johansson contoh fotografi imej
thereason.us:
• thereason.us contoh imej

Aplikasi praktikal:

susun atur batu menawarkan kelebihan fungsional dan estetik:

• Galeri Imej: Sesuai untuk galeri dengan imej dimensi yang berbeza -beza, mengelakkan keperluan untuk saiz semula dan kehilangan kualiti.
• Posting blog: Membolehkan paparan pos blog multi-lajur tanpa memangkas ringkasan panjang yang berbeza-beza.
• portfolio: dengan berkesan mempamerkan projek, reka bentuk, atau item portfolio lain.

memilih susun atur batu:

Sebelum melaksanakan susun atur batu, pertimbangkan:

susun atur berasaskan grid diperlukan.
item harus mempunyai dimensi yang pelbagai.
Sejumlah besar item diperlukan untuk merealisasikan sepenuhnya manfaat susun atur.

Menjana susun atur batu:

Oleh kerana kerumitan pengiraan yang terlibat, menggunakan plugin adalah disyorkan. Pilihan yang popular termasuk:

Masonry

• Wookmark
• isotope
• bersarang
• freetile.js

Ciri -ciri plugin Masonry:

Walaupun visual serupa, plugin menawarkan ciri -ciri yang berbeza. Ciri -ciri utama yang perlu dipertimbangkan termasuk:

saiz lajur:
• saiz lajur dinamik menawarkan fleksibiliti yang lebih besar.
Menyusun dan Penapisan:
• Membolehkan pelarasan susun atur dinamik tanpa penstrukturan semula.
animasi:
• Meningkatkan pengalaman pengguna dengan perubahan susun atur animasi.
Elemen Dinamik:
• Membolehkan menambah/mengeluarkan unsur -unsur tanpa penyegaran halaman. Pilihan susun atur: Penyesuaian lebar lajur, saiz longkang, dan penjajaran.
• Membuat susun atur batu dengan plugin (contoh masonry.js):

Contoh ini menggunakan plugin masonry.js yang popular:

Langkah 1:

Termasuk

pada akhir html anda.

masonry.pkgd.min.js Langkah 2:

Buat unsur -unsur dengan lebar dan ketinggian yang berbeza -beza, berkongsi kelas biasa (mis., "Item").

<🎜>

Langkah 3:

Mulakan plugin batu:

<div id='masonry'>
  <div class="item"></div>
  <div class="item"></div>
  <!-- ... more items ... -->
</div>

Kesimpulan:

var container = document.querySelector('#masonry');
var masonry = new Masonry(container, {
  columnWidth: 50,
  itemSelector: '.item'
});

susun atur batu mudah dilaksanakan menggunakan plugin. Eksperimen dengan plugin dan tetapan yang berbeza untuk mencapai hasil yang diinginkan.

(seluruh kandungan asal, termasuk Soalan Lazim, ditinggalkan untuk keringkasan kerana ia sebahagian besar pengulangan maklumat yang telah disediakan dan difrasifikasi di atas.)

Atas ialah kandungan terperinci Memahami Layout Masonry - Sitepoint. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!