Buat Templat Grid Masonry Fast dengan Bricks.js

Ia sentiasa mudah buat grid dengan jQuery, menggunakan plugin dan tutorial percuma dari pemaju.

Walau bagaimanapun, gred batu lebih sukar untuk dibina, kerana mereka tidak patut merata di halaman. Anda akan mempunyai lebar saiz tetap untuk lajur tetapi yang ketinggian item boleh berubah secara liar.

Untuk membuat grid batu piksel sempurna anda memerlukan plugin seperti Bricks.js.

Plugin ini benar-benar sumber terbuka dan cepat ridiculously. Ia akan menjadikan grid kurang daripada setengah saat, walaupun dengan berpuluh-puluh item pada halaman.

Kebanyakan orang mengenali grid batu dari Pinterest kerana mereka mempopularkan susun atur. Tetapi, sejak itu berkembang digunakan di banyak laman web lain, juga.

Untuk memulakan Bricks.js, anda perlu beberapa kandungan dan a susun atur halaman lalai. Anda memasang pemalam kanan dari npm atau melalui GitHub jika itu lebih mudah.

Dengan persediaan awal, anda lulus tiga parameter tertentu:

1. Container - a Elemen kontena DOM untuk grid
2. Dikemas - a atribut yang menentukan bagaimana item mengalir dalam grid
3. Saiz - a pelbagai lebar dan saliran, ditakrifkan dalam piksel

Plugin menggunakan semua nilai ini untuk mengautomasikan grid batu dari awal.

Dan, anda juga boleh gunakannya untuk memuatkan tak terhingga jika anda mahukan grid batu yang berfungsi seperti Pinterest.

Lihat halaman demo untuk grid interaktif bahawa anda boleh mengubah untuk ujian. Anda mentakrifkan jumlah bilangan unsur dan ia akan mengautomasikan proses semasa memaparkan masa rendering total.

Sebagai contoh, saya menguji grid dengan 500 elemen dan ia hanya mengambil 13 milisaat untuk melengkapkan. Ini tidak menyebabkan masa untuk semua 500 imej dimuatkan, tetapi 13 ms untuk grid yang dihasilkan secara automatik sangat mengagumkan.

Mulailah diri anda dengan memuat turun fail dari GitHub dan mengikuti arahan pemasangan. Ini mungkin berasa mengelirukan pada mulanya tetapi lebih banyak mainan dengannya dengan lebih mudah untuk ditubuhkan.