Ali @mintik
19 Temmuz 2020 12:23

FreeWall.js

FreeWall

Websitemi  sürekli takip ediyorsanız eğer birçok grid örneği paylaştığımızı görmüşsünüzdür. Normalde kolay kolay bir çalışma  için mükemmel, süper gibi kelimeleri  başlık olarak kullanmam. Ama Minh Nguyen tarafından geliştirilmiş olan FreeWall  uygulaması için hazırlanmış demo sayfasını görünce içimden böyle bir başlık eklemek geldi.  FreeWall’da sürükle bırak özelliği  yok. Sanırım tek eksiği bu.

Websitenizde grid düzenleri oluşturmak için geliştirilmiş olan FreeWall’ın mükemmel tarafı ise çerçevelerin websayfası içind ekusursuz dizilişi. Çok ufak ve hatta farkedilmeyecek boyutlarda diziliş hataları olabilir  buda muhtemelen  en sondabulunan çerçevede olur. Bunun dışında çerçevelerin  tamamı milimlik  bir çizgide sıralanıyor. Tarayıcıya  duyarlı ve bütün cihazlarda FreeWall sayesinde web sayfasındaki çerçeveler mükemmel bir şekilde listelenebiliyorlar.  Demo sayfasını incelediğinizde sağ üstteki ekran boyutlarını tıklayarak hangi cihazlarda çerçevelerin nasıl sıralandığını  görebilirsiniz. Ayrıca tarayıcı boyutunuda değiştirip demoyu incelemenizi tavsiye ederim. Bütün çerçeveler dinamik bir şekilde  şekil ve yer değiştiriyorlar.

Kullanım

  • Head etiketleri arasına eklemeniz gereken bölümler.

Js dosya adresleri :

<script src="js/jquery-1.7.min.js"></script>
<script src="js/freewall.js"></script>

JavaScript :

<script>
 $(function() {
 var wall = new freewall("#container");
 wall.fitWidth();
 });
</script>

Css :

<style type="text/css">
 #container {
 width: 80%;
 margin: auto;
}
 .item {
 background: rgb(135, 199, 135);
 width: 320px;
 height: 320px;
}
</style>
  • Body etiketleri arasına eklemeniz gereken bölüm.

Html :

<div class="container">
 <li class="item"></li>
 <li class="item"></li>
 <li class="item"></li>
 <li class="item"></li>
 <li class="item"></li>
 <li class="item"></li>
</div>

 

Bu Yazıyı Paylaş

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.

ÜYE GİRİŞİ

Arkadaş ekleme, özel mesaj, kişisel yazı paylaşmak için siteye giriş yapın

Şifremi unuttum? Kayıt Ol!
  • sahra:

    Güzel ve basit kullanım. Oldukça işime yarayacak....

  • isimsiz:

    Senin sitenden buyurindir.org sitemize köpek gibi link çıkışı yapılmış?...

  • fhghg:

    YouPhpTube scriptini kullanan hazır bi site var mı peki varsa ismi nedir?...

  • Ali:

    Eski butonlarda sorun vardı diye yenilerini ekledim. Acaba sende hala eski buto...

  • HASBA:

    hocam nasıl alıcam demoya indire başıyorum hiç birşey olmuyor...

  • Araç çubuğuna atla