Pazartesi 15 Ağustos 2022
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

Google Chrome’ un Yeni iOS Uygulaması

Agave Games 7 Milyon Dolar Yatırım Aldı

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

Google Chrome’ un Yeni iOS Uygulaması

15 Ağustos 2022
Girişimcilik

Agave Games 7 Milyon Dolar Yatırım Aldı

15 Ağustos 2022
Güncel

Mit’ten Devrim Yaratacak Yenilik; Al Çip

15 Ağustos 2022
Güncel

Yapay Zeka ile Proteinleri Keşfetmek

14 Ağustos 2022
© 2021 Webmaster Kitchen. Tüm Hakları Saklıdır.