JY案例二:瀑布流布局頁面(高度判斷式)

作者：田想兵 博客地址:http://www.cnblogs.com/tianxiangbing

由於昨天寫的那篇博文《JY案例一:瀑布流布局頁面》，大家都對它不屑一顧，我本着不以為恥反以為榮的態度，決定寫瀑布流的續集，我還就跟你們耗上了。昨天有觀眾說我寫的只是像瀑布流，還達不到瀑布流的效果，讓我看什么jquery實現的XX效果，我告訴你，我急眼了，我不跟外行計較！

在上一篇《JY案例一:瀑布流布局頁面》里提到說，會遇到一個很嚴重的問題，就是當頁面內容足夠多了的時候，會出現嚴重的不對齊狀況，因為我們沒有辦法計算它的高度，除非每次加載完后再進行一次重排。又有人說了，我們為什么沒有辦法得到它的高度呢？好，這個問題問得好，因為圖片沒加載完前是很難知道高度的，注意是很難，不是不能。方法可能會有如下幾種：

本文案例請點擊這里! 

1。后台返回圖片高度

2。通過預加載圖片得到高度

3。你猜你猜你猜猜猜

明顯的，第一種更現實點，因為只要是站內圖片，一般程序在上傳的時候都會保存它的高度。 好，先看今天的效果圖：

 

 這次出現了三列不均等數目了，所以它的底部會更均勻顯示，具體演示頁請猛擊http://www.lovewebgames.com/demo/waterfall-height.html

好，來說說我的思路，首先，每一項，都要找到這N列中高度最短的那一列進行強勢插入。 然后沒了，好像這個要比昨天那個更簡單些。本來打算今天做定位瀑布流的例子的，就是因為有觀眾覺得我昨天的那個不算瀑布流，所以又拖了一次，改日再說。

貼判斷最小高度的代碼：

for ( var j=0;j<rl ;j++ ){
                 var minColumn = JY.query(".waterfall_old ul:eq(0)")[0];
                 var tmpH = JY.height(minColumn);
                 for ( var i =0,l=column; i<l ; i++ ){
                     var curColumn = JY.query(".waterfall_old ul:eq("+i+")")[0];
                     var curHeight = JY.height(curColumn);
                     if (curHeight < tmpH){
                        minColumn = curColumn;tmpH =curHeight;
                     }
                }} 

復雜嗎？不復雜。比冒泡簡單多了。然后就是插入到最小高度列:

                 var tmp = document.createElement( " li ");
                tmp.innerHTML =  ' <img src=" '+r[j].url+ ' " alt=" '+r[j].text+ ' " height=" '+r[j].height+ ' px"/><div> '+r[j].text+ ' </div> '  
;                         minColumn.appendChild(tmp);   

我再次表達對博客園的編輯器插入代碼的不滿。

今天到此結束了，本文案例請點擊這里! 如果您有任何的疑問，都不要來問我，請重復重復再重復的閱讀本文或上篇博文。也可以加入我的扣扣群：70210212.