JQuery Masonry Eklentisi İle Etkileyici Tasarımlar Oluşturmak

  • 2
  • untitled

jQuery masonry eklentisi yardımıyla paylaşımlarınızı çok görsel biçimde sunabilirsiniz ziyaretçilerinize, eklentiye parametre olarak geçtiğiniz paylaşımlarınızı yan yana ve devamında alttan devam edecek şekilde boşluklarıda doldurabilen bir tasarım oluşturmaktadır.

jQuery Masonry Eklentisi ile Etkileyici Tasarımlar Oluşturmak

Masonry eklentisi ile oluşturulmuş bazı tasarımlar;

untitled 2

Alttaki gibi bir HTML içeriğimizin olduğunu varsayıyorum.

HTML

Masonry eklentisini kullanabilmek için alttaki gibi script etiketini tanımlayınız.

Html kısmında tanımladığımız item ve w2 css sınıfları için tanımlamaları css kodları aşağıda yer almaktadır.

Şimdi 3 farklı şekilde masonry eklentisinin nasıl çalıştırıldığını görelim.

Javascript

Üstteki kodda querySelector ile container id’sine sahip elementi container nesnesine aktarıyoruz ardından bu nesneyi örneğini aldığınız Masonry sınıfına parametre olarak geçiyoruz ayarlar kısmında 2 satır görüyorsunuz ilki columnWidth özelliği ile paylaşımlarınızı kaç piksellik kolonlara bölmek istediğinizi belirtiyorusunuz itemSelector ile paylaşımlarınızın bulunduğu sınıfı parametre olarak geçiyorsunuz örnek olarak üstte html kısmındada sizlerle paylaştım örnek kod bloğunda container id’li div içerisinde 3 div bulunuyor o 3 divinde item adında bir sınıfının olduğunu görürsünüz işte buradaki parametreye bu sınıfı belirtiyoruz.

Javascript ile tek element ile tanımlamayı aşağıdaki gibide yapabilirsiniz

Javascript

HTML ile tanımlama işlemini ise aşağıdaki şekilde gerçekleştirebilirsiniz.

HTML

Üstteki html ile masonry eklentisini kullanımına ait kodda dikkat etmeniz gereken bazı durumlar var container id’li div elementine js-masonry adlı sınıfı ekleyin ardından data-masonry-options adlı data attribute’ünü ekleyin ve değer olarak json formatında options’ları geçebilirsiniz.

Son olarak jquery ile masonry eklentisi tanımlama kodunu görelim

Masonry eklentisi jQuery olmadan’da çalışabilmektedir yukarıdaki gibi jQuery seçicisi kullansanız dahi jQuery kütüphanesine ihtiyacınız yoktur ama kendi ihtiyacınız için jQuery kullanıyorsanız jQuery kütüphanesi ilede aynı kodla sorunsuz çalışın.

Detaylı Bilgi

Bir cevap yazın

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