Masonry resim listeleme (pinterest tarzinda)

Masonry listeleme ile resimlerinizi gosterisli ve tasarimi bozmayacak sekilde listeleyebilirsiniz. Bu tarz bir listelemeye ben ilk pinterest sitesinde denk gelmistim. Ilk zamanlar uygulamaya calistigimda bayagi zorlanmistim, malum Turkce kaynak fazla bulunmuyordu. Simdi bu konuda zorlanan arkadaslar icin en basitinden anlatmaya calistim.

Bu uygulamanin en guzel yani listelenen resmin yuksekligi ne olursa olsun herhangi bir bosluk v.s olusmuyor. Ayrica tasariminiz kuculdukce (tarayici kuculdukce) kendisini optimize ederek kuculuyor ve tasarimi bozmuyor.

Download (indir) –  Demo

Uygulama anlatimina gecerken anlatimin tamaminda yer alan calisir durumdaki dosyalari yukaridan indirebileceginizi belirtmek isterim.

* CSS kodlarimiz

Resimleri listelerken bize gerekli olan genislik ve resimler arasi bosluk bilgilerini ayarlamak icin ihtiyacimiz olacak. Asagidaki css kodlarini sayfamizin head taglari icine ekleyin yada sadece gerekli kisimlari alarak sitenizin css dosyasina ekleyiniz.

Resimleri listemek

Resimleri listelerken ilk once bize masonry ye bildirecegimiz dis DIV gerekli. Belirtecegimiz ID ile bunun icindeki listelenen resimlerin masonry ile islenmesini saglayacagiz. Ancak unutmamaniz gereken bu div icindeki resimlerinde belli bir kural ile listelenmesi gerekiyor. Ornek asagidadir, isterseniz inceleyin sonrasinda gerekli bolumleri aciklayayim.

Yukarida goreceginiz kisim onemli, cunku masonry icerisindeki resimleri lisleyecek. Simdide resimleri listelerken kullanacagimiz formati hazirlayalim. Resimlere link verebilir yada vermeyebilirsiniz, bu size kalmis.

 * HTML kisminin tamami

Yukaridaki iki kismi asagidaki sekilde birlestiriyoruz, siz de resimleri goreceginiz gibi sirayla listelemeniz gerekli..

* JAVASCRIPT kodlarimiz

Son kisim javascript kodlarini sayfanin en altina eklemek. Jquery kutuphanesini sayfanida onceden include ettiyseniz o kismi cikarip sadece masonry kutuphanesini ve altindaki ayar kismini eklemeniz yeterlidir.

Yukardaki kodlardan sonra sayfanizdaki resimler DEMO da oldugu gibi listelenecektir. Eger listelemede bir sorun varsa lutfen yaptiklarinizi ve dokumuni dikkatlice tekrar inceleyiniz. Ayrica include ettiginiz javascript kutuphanelerininde tam yolunu yazdiginizdan ve calistigindan emin olun.

1 YORUM

Bir Cevap Yazın