Buat Tata Letak Kotak Masonry Cepat dengan Bricks.js

Itu selalu sangat sederhana buat kisi dengan jQuery, menggunakan plugin dan tutorial gratis dari pengembang.

Namun, grid batu lebih sulit untuk dibangun, karena mereka jangan pas di halaman. Anda akan memiliki lebar ukuran tetap untuk kolom tetapi ketinggian barang bisa sangat bervariasi.

Untuk membuat sebuah grid pasangan bata sempurna-pixel Anda memerlukan plugin seperti Bricks.js.

Plugin ini sepenuhnya open-source dan sangat cepat. Itu akan membuat grid dalam waktu kurang dari setengah detik, bahkan dengan lusinan item di halaman.

Kebanyakan orang mengenali grid pasangan bata dari Pinterest karena mereka mempopulerkan tata letak. Tapi, sejak itu berkembang menjadi digunakan di banyak situs web lain, terlalu.

Untuk memulai dengan Bricks.js, Anda perlu beberapa konten dan a tata letak halaman default. Anda menginstal plugin langsung dari npm atau melalui GitHub jika itu lebih mudah.

Dengan pengaturan awal, Anda lulus tiga parameter spesifik:

1. Wadah - Sebuah Elemen wadah DOM untuk grid
2. Penuh sesak - sebuah atribut yang menentukan bagaimana item mengalir di kisi
3. Ukuran - sebuah berbagai lebar dan selokan, didefinisikan dalam piksel

Plugin menggunakan semua nilai-nilai ini untuk mengotomatisasi kotak pasangan bata dari awal.

Dan, Anda bahkan bisa menggunakannya untuk pemuatan tak terbatas jika Anda ingin grid batu yang berfungsi seperti Pinterest.

Lihat halaman demo untuk kotak interaktif Anda dapat mengubah untuk pengujian. Kamu menentukan jumlah elemen dan itu akan mengotomatiskan proses sambil menampilkan total waktu render.

Misalnya, saya menguji kisi dengan 500 elemen dan hanya butuh waktu 13 milidetik untuk menyelesaikan. Ini bukan faktor waktu untuk memuat 500 gambar, tetapi 13 ms untuk kisi yang dibuat secara otomatis sangat mengesankan.

Mulailah diri Anda dengan mengunduh file dari GitHub dan mengikuti instruksi instal. Ini mungkin terasa membingungkan pada awalnya tetapi semakin Anda mempermainkannya semakin mudah diatur.