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>