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.
<style>
/* Resimlerin boyut ve stil bilgileri */
.kuaza_resimler { width: 250px;margin-left:5px;margin-right:5px;margin-bottom:10px; }
/* Resim alanini ortalamak icin kullanacagimiz kisim*/
#kuaza_resimler{
margin: 0 auto;
}
</style>
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.
<div id="kuaza_resimler">
<!-- resimleri tek tek bu kisimda listeleyecegiz.. -->
</div>
Yukarida goreceginiz kisim onemli, cunku masonry icerisindeki resimleri lisleyecek. Simdide resimleri listelerken kullanacagimiz formati hazirlayalim. Resimlere link verebilir yada vermeyebilirsiniz, bu size kalmis.
<div class="kuaza_resimler" >
<a href="https://makaleci.com" title="Kuaza">
<img alt="Kuaza" src="http://sv102.piclect.com/59145ff53/t/15/02/15/4c1ff9089dde6.jpg">
</a>
</div>
<!-- Yukaridaki gibi resimleri alt alta siralayacaksiniz -->
* HTML kisminin tamami
Yukaridaki iki kismi asagidaki sekilde birlestiriyoruz, siz de resimleri goreceginiz gibi sirayla listelemeniz gerekli..
<div id="kuaza_resimler">
<div class="kuaza_resimler" >
<a href="https://makaleci.com" title="Kuaza">
<img alt="Kuaza" src="http://sv102.piclect.com/59145ff53/t/15/02/15/4c1ff9089dde6.jpg">
</a>
</div>
<div class="kuaza_resimler" >
<a href="https://makaleci.com" title="Kuaza">
<img alt="Kuaza" src="http://sv102.piclect.com/59145ff53/t/15/02/15/4c1ff9089dde6.jpg">
</a>
</div>
<div class="kuaza_resimler" >
<a href="https://makaleci.com" title="Kuaza">
<img alt="Kuaza" src="http://sv102.piclect.com/59145ff53/t/15/02/15/4c1ff9089dde6.jpg">
</a>
</div>
<div class="kuaza_resimler" >
<a href="https://makaleci.com" title="Kuaza">
<img alt="Kuaza" src="http://sv102.piclect.com/59145ff53/t/15/02/15/4c1ff9089dde6.jpg">
</a>
</div>
<!-- Yukaridaki gibi resimleri alt alta siralayacaksiniz -->
</div>
* 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.
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="masonry.pkgd.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
var kuaza_resimler = document.querySelector('#kuaza_resimler');
var msnry = new Masonry( kuaza_resimler, {
itemSelector: '.kuaza_resimler',
isFitWidth: true
});
});
</script>
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.
