FreeWall.js

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>