Kodlama / Javascript

Tarih12 Eylül 2017, 23:26
Yorumlar0 Yorum

JavaScript ile Pinterest Tarzı Kutu Sıralama (Masonry)

Geçmişte uzun süre aramış, bir kaç projemde kullandıktan sonra sık kullanılanlara attığım ve öylece duran bir eklentiden bahsetmek istedim. Hala zaman zaman ihtiyacım oldukça projelerime dahil ettiğim bu javascript dosyası, Pinterest tarzı sıralamayı bizlere sunuyor.

 

Pinterest Tarzı Sıralam Nedir?

Pinterest aşağıdaki görseldeki tarzda bir takım kutulara sahiptir.

Bu Sıralamayı Nasıl Uygularız?

Bu sıralama uygulamasını Masonry kütüphanesini sayfamıza dahil ederek uygulayabiliriz. Kendi sitelerindeki örneği şöyle bırakıyorum;

<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2"></div>
  <div class="grid-item grid-item--height2"></div>
</div>
.grid-item {
  float: left;
  width: 80px;
  height: 60px;
  border: 2px solid hsla(0, 0%, 0%, 0.5);
}

.grid-item--width2 { width: 160px; }
.grid-item--height2 { height: 140px; }

Akabinde belli bir düzende sıralamalar gerçekleşecektir.

Masonry Web Sitesini Ziyaret Etmek İçin Buraya Tıklayın!

Yorumlar
Bu konu hakkında henüz kimse fikrini belirtmemiş. Siz fikrinizi belirtmek ister misiniz?
Konu hakkında düşüncelerinizi iletin