bildirgec.org

Bir web sayfasına magazin/gazete görünümünde gird oluşturmak JQuery ile çok basit bir şekilde olmaktadır. Aşağıda kullanılan yöntem ve fonksiyonlar çok basit olması nedeniyle bir çok kişi tarafından rahatlıkla uygulanabilir. Bunları adımlayarak yapacak olursak:1- Basit bir html sayfası oluşturalım:

burada kullanılan divlerin sayısı artırılabilir ve içeriği makale olabilir, nesne olabilir, yazı olabilir.2- Oluşturduğumuz html dosyamıza stil verelim:

sayfamıza stil verdikten sonra görünümü aşağıdaki şekilde olacaktır.

3- bu adımda ise Javascript işlemleri yapıyoruz:


Gerekli özellikleride tanımladıktan sonra bütün kutuların üst pozisyonlarını hesaplamamız gerekiyor çünkü her kutunun boyu farklı olabilir içerdiği bilgiye göre, onun içinde aşağıdaki işlemleri yapıyoruz.doLayout : function() {var self = this;var pointer = 0;var arr = [];var columns = Math.max(this.COLNUMBER, parseInt($(‘body’).innerWidth() / (this.COLWIDTH + this.COLMARGIN)));$(‘.box’).css(‘position’, ‘absolute’).css(‘width’, this.COLWIDTH + ‘px’);$(‘.box’).each(function() {var tempLeft = (pointer * (self.COLWIDTH + self.COLMARGIN));$(this).css(‘left’, tempLeft + ‘px’);var tempTop = 0;if (arr[pointer]) { tempTop = arr[pointer]; }$(this).css(‘top’, tempTop + ‘px’);arr[pointer] = tempTop + $(this).outerHeight() + self.COLMARGIN;pointer++;if (pointer === columns) { pointer = 0; }});}
4- Son olarak JQuery ile gridlerimizi oluşturuyoruz:
$(window).ready(function() {myFluidGrid.doLayout();}).resize(function() {myFluidGrid.doLayout();});
Bütün bu işlemleri yaptıktan sonra sayfamızın görüntüsü aşağıdaki şekilde olacaktır.

Yapılan tüm işemleri bütün halinde aşağıda görebilirsiniz:

Kaynak