JY案例一:瀑布流布局頁面
作者：田想兵 博客地址:http://www.cnblogs.com/tianxiangbing
在我的上一篇博文里，介紹了由我自主開發的javascript框架JY ，由於最近要整理BUG，還要寫JY的API ,所以一直沒空出Demo，糾結的API，我還是放棄吧，等以后誰好心幫我補充完整吧。
由於消息不靈通，最近才聽到一個新名詞“瀑布流”布局， 說現在很流行，作為一個走在時尚尖端的技術流前端，怎么能落伍呢？於是乎，百度百科了下，它是這樣定義的：
瀑布流，又稱瀑布流式布局。是目前比較流行的一種網站頁面布局，視覺表現為參差不齊的多欄布局，隨着頁面滾動條向下滾動，這種布局還會不斷加載數據塊並附加至當前尾部。它有兩個重點，一個是參差不齊，但不是完全的，而只是“等寬不等高”，每項的寬度是一樣的，但高度不同；另一個重點是它是滾動式加載的。百度百科上還說，有三種實現方式：
本文案例請 點擊這里 !1、傳統多列浮動。代表網站 蘑菇街和哇哦
2、用CSS3實現
3、絕對定位。代表網站Pinterest
今天我們要實現的就是第一種方式，也是最簡單最快的一種。效果圖：
首先我們要選擇一個好用的js框架，我這里因為是JY的案例，所以肯定一定是用的JY啦，^_^，所以應觀眾要求，我們就選用了JY，然后，就是准備用幾列來表現了，好，又有觀眾說要用三列了。還有數據源，這里我們用json格式的文本。如下格式：
就兩屬性，一個圖片URL，一個文本說明，其它不多說。然后我們打算把它放到一個div容器里，分三個ul顯示.
< ul >
< li >< img src ="imgs/1.jpg" alt ="JY javascript" />< div >JY javascript </ div ></ li >
< li >< img src ="imgs/1.jpg" alt ="JY javascript" />< div >JY javascript </ div ></ li >
< li >< img src ="imgs/1.jpg" alt ="JY javascript" />< div >JY javascript </ div ></ li >
</ ul >
< ul >
< li >< img src ="imgs/2.jpg" alt ="JY javascript" />< div >JY javascript </ div ></ li >
< li >< img src ="imgs/1.jpg" alt ="JY javascript" />< div >JY javascript </ div ></ li >
< li >< img src ="imgs/1.jpg" alt ="JY javascript" />< div >JY javascript </ div ></ li >
</ ul >
< ul >
< li >< img src ="imgs/3.jpg" alt ="JY javascript" />< div >JY javascript </ div ></ li >
< li >< img src ="imgs/2.jpg" alt ="JY javascript" />< div >JY javascript </ div ></ li >
< li >< img src ="imgs/1.jpg" alt ="JY javascript" />< div >JY javascript </ div ></ li >
< li >< img src ="imgs/1.jpg" alt ="JY javascript" />< div >JY javascript </ div ></ li >
</ ul > </ div >
然后，我們要把數據源填棄進這個div呢，問題就來了，該怎么填充呢，又有觀眾說了，一個里面放一個不就完了，這位觀眾說得很好，於是，我就把數據源分成了三組。准備，一個ul里放一個組的數據，代碼如下：
var rl = r.length;//數據源長度
var len = rl %column ==0 ? parseInt(rl/column):parseInt(rl/column)+1;
for ( var j=0;j<len ;j++ ){
var tmp = [];
for ( var i =0,l=column; i< l && r.length ;i++ ){
tmp.push(r.shift());
}
arr.push(tmp); }
這樣就按column分好組了，不復雜吧？！這個跟寫分頁時是一樣的道理，又不完全一樣。看不懂就多看幾遍就懂了。這里沒有JY代碼呢！
分好組后，我們就把它強勢插入到各個ul里吧。
for ( var j = 0, ln=arr[i].length; j<ln ;j++ ){
var tmp = document.createElement("li");
tmp.innerHTML = '<img src="'+arr[i][j].url+'" alt="'+arr[i][j].text+'"/><div>'+arr[i][j].text+'</div>'
JY.query(".waterfall_old ul:eq("+j+")")[0].appendChild(tmp);
} }
ps:怎么博客園的編輯器，插入代碼的時候，總是會有一行跑到外面來的，真是糾結
最后就是滾動加載了，這個應該會簡單點吧，就是滾到差不多底部的時候，就再ajax請求一次數據源。
if (JY.byId("footer_wrap"))
if ( parseInt(document.documentElement.scrollTop) + JY.height(window) > JY.offset("footer_wrap").y) {
curPage++;
show(curPage);
}
}; JY.bind(window,"scroll",dongtaiMore);
這樣，就算完事了，沒有想象中那么復雜吧？！當然這只是一個簡單的例子，你可以把它做得更完美些。因為現在是均勻分布在三列里的，這勢必會造成最后某列參差不齊。但這種傳統的做法，冒似也沒有更好的優化方法，除非你知道每張圖片的高度，那樣就可以去計算了。這就是剛才說的絕對定位的方法。這留到下次再說吧！
今天就到這，本文案例請點擊這里!如果你有任何的疑問都不要來問我，請重復閱讀本文，或加入Q群70210212。