Eklentileri ve geliştiricilerin ücretsiz öğreticilerini kullanarak, jQuery ile grid oluşturmak her zaman oldukça basittir.
Bununla birlikte, duvar ızgaraları, sayfaya eşit şekilde sığmadığı için responsive oluşturmak daha zordur. Sütunlar için sabit genişliklere sahip olursunuz, ancak parça yükseklikleri değişebilir.
Mükemmel bir duvar ızgarası yapmak için Bricks.js gibi bir eklentiye ihtiyacınız var.
Bu eklenti tamamen açık kaynak ve hızlıdır. Sayfadaki onlarca öğeyle bile, ızgarayı yarım saniyeden daha kısa bir sürede oluşturabilir.
Çoğu kişi Pinterest’ten masonluk ızgaralarıyı tanır, çünkü yerleşimi popülerleştirdiler. Ancak, o zamandan beri birçok başka web sitesinde kullanılmak üzere büyüdü.
Bricks.js ile çalışmaya başlamanız için bazı içeriğe ve varsayılan sayfa düzenine sahip olmanız gerekir. Bu eklentiyi npm’den veya GitHub’dan kurarsanız bu daha kolay.
İlk kurulumda üç özel parametreyi geçersiniz:
Container – grid için Dom container bileşeni
Packed – grid sistemde öğelerin nasıl akacağını belirleyen bir özellik
Sizes – piksel cinsinden tanımlanmış genişlik ve oluk dizisi
Eklenti, duvar ızgarasını sıfırdan otomatik hale getirmek için tüm bu değerleri kullanır. Ve sadece Pinterest gibi çalışan duvar ızgaraları isterseniz sonsuz yükleme için kullanabilirsiniz.
Deneme yapmak ve değiştirebileceğiniz etkileşimli bir kılavuz için demo sayfasını inceleyin. Toplam öğe sayısını tanımlarsınız ve toplam işleme süresi görüntülenirken işlemi otomatikleştirir.
Örneğin, 500 elementli bir ızgarayı test ettim ve tamamlanması yalnızca 13 milisaniye sürdü. Bu, 500 görüntünün yüklenme süresini etkilemez, ancak otomatik olarak oluşturulmuş bir ızgaranın 13 ms’lik kısmı etkileyicidir.
Dosyaları GitHub‘dan indirip kurulum talimatlarını izleyerek kendinize başlayın. Bu ilk başta kafa karıştırıcı gelebilir ancak biraz kurcaladığınızda bu eklentiyi öğrenebileceğinizi umuyorum.
