Bricks.js ile Hızlı Duvar Izgara Düzenleri Oluşturun

Her zaman için oldukça basit oldu jQuery ile ızgaralar oluşturun, eklentileri ve geliştiricilerin ücretsiz öğreticiler kullanarak.

Ancak, duvar ızgaraları inşa edilmeleri daha zordur sayfa boyunca eşit sığma. Sütunlar için sabit boyutlu genişliklere sahip olacaksınız öğe yükseklikleri çılgınca değişebilir.

Yapmak piksel-mükemmel duvarcılık ızgarası gibi bir eklentiye ihtiyacınız var Bricks.js.

Bu eklenti tamamen açık kaynaklı ve gülünç hızlı. Olacak ızgarayı yarım saniyeden daha az bir sürede aç, sayfadaki düzinelerce öğeyle bile.

Çoğu kişi, yerleşim düzenini popülerleştiklerinden beri duvar ızgaralarını Pinterest'ten tanır. Ancak, o zamandan beri büyüdü diğer birçok web sitesinde kullanılan, çok.

Bricks.js ile başlamak için gerekir bazı içerik ve bir varsayılan sayfa düzeni. Eklentiyi doğrudan npm'den veya GitHub üzerinden yüklerseniz, daha kolaysa.

İlk kurulumda, başarılı üç spesifik parametre:

1. konteyner - bir DOM konteyner elemanı ızgara için
2. paketlenmiş - bir nitelik Bu, öğelerin ızgarada nasıl aktığını belirler
3. Boyutları - bir genişlik ve oluk dizisi, piksel cinsinden tanımlanmış

Eklenti, tüm bu değerleri duvarcılık ızgarasını sıfırdan otomatikleştirmek için kullanır..

Ve hatta sonsuz yükleme için kullanın Pinterest gibi çalışan duvar ızgaraları istiyorsanız.

İçin demo sayfasını inceleyin. etkileşimli ızgara Test için değiştirebileceğiniz. Sen toplam eleman sayısını tanımla ve toplam işleme zamanını gösterirken işlemi otomatik hale getirir.

Örneğin, bir ızgarayı test ettim. 500 element ve sadece aldı 13 milisaniye Tamamlamak. Bu, 500 görüntünün yüklenmesinin tümünü hesaba katmaz, ancak Otomatik oluşturulmuş bir ızgara için 13 ms çok etkileyici.

Dosyaları GitHub'dan indirip kurulum talimatlarını izleyerek başlayın. Bu başlangıçta kafa karıştırıcı olabilir ama onunla ne kadar çok oyuncak oynarsanız o kadar kolay kurulabilir.