Cuma 24 Mart 2023
Hakkında
Yazarlarımız
Reklam
Künye
İletişim
Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı

Bülten

Sosyal Medya Yasası Kabul Edildi

Binance ‘e Siber Saldırı

Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı
  • BAŞLARKEN
    • KOD
      • PHP
      • Asp.Net
      • Swift
      • MySQL
      • CMS
  • TASARIM
    • İpuçları
    • Çizim
    • Illustrator
    • Photoshop
    • Trendler
  • ARAYÜZ
    • JavaScript
    • HTML5
    • CSS
    • REACT
  • İPUÇLARI
    • API
    • Güvenlik
    • IDE
    • Framework
    • OS
    • Verimlilik
    • İçerik
      • Dökümantasyon
      • İpuçları
      • Nasıl Oluşturulur?
  • KAYNAKLAR
    • Tasarım
    • Kod
    • İş
  • GİRİŞİM
    • Finans
    • Girişimci
    • Nasıl yapılır?
  • ARAÇLAR
  1. Anasayfa
  2. Arayüz
  3. Bricks.js ile Grid Layout Görünümü Oluşturun
 Bricks.js ile Grid Layout Görünümü Oluşturun
Arayüz JavaScript

Bricks.js ile Grid Layout Görünümü Oluşturun

Yazar : Bilal UÇAR 12 Ekim 2017 0 Comment

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.

Etiketler: grid layout js grid layout pinterest grid sistemi pinterest grid sistemi nasıl yapılır pinterest tarzı görünüm
Önceki Yazı
Sonraki Yazı

Bilal UÇAR (Website)

administrator

Front-end Developer @Webmaster.Kitchen. Front-end developer olarak çalışıyorum. Bu konuda öğrendiklerimi sizlerle paylaşmaya çalışıyorum. Siz de yaptığınız çalışmaları, edindiğiniz bilgileri paylaşabilirsiniz. Yorum alanı ile mutfağa katkıda bulunun.

Yorum Yap Yorumu İptal Et.

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Taze Yazılar
Güncel

Sosyal Medya Yasası Kabul Edildi

14 Ekim 2022
Blockchain

Binance ‘e Siber Saldırı

8 Ekim 2022
Blockchain

Binance ‘den Ücretsiz Eğitim

5 Ekim 2022
Güncel

Japonya için Yenilenen Corolla

4 Ekim 2022
© 2021 Webmaster Kitchen. Tüm Hakları Saklıdır.