Jquery中文網 www.uhadif.co
Jquery中文網 >  jQuery  >  jquery 教程  >  正文 JavaScript、jQuery、HTML5、Node.js實例大全-讀書筆記4

JavaScript、jQuery、HTML5、Node.js實例大全-讀書筆記4

發布時間:2016-09-18   編輯:www.uhadif.co
jquery中文網為您提供JavaScript、jQuery、HTML5、Node.js實例大全-讀書筆記4等資源,歡迎您收藏本站,我們將為您提供最新的JavaScript、jQuery、HTML5、Node.js實例大全-讀書筆記4資源

5.2.2 讓瀑布流動起來

打好基建之后,就需要寫JavaScript代碼。首先如果數據不夠顯示一屏幕的情況,就用新數據來補足它,在補充的時候是根據4列中最矮的那一個為優先補充,因為高矮尺寸一般只有在客戶端才看得到,服務端雖然也可以計算,但是會很浪費資源,客戶端的內存和CPU能用則多用,只要不讓客戶端變慢就行。
只要圖片高度不一致,通過這樣的思路很快就可以看到一個“瀑布流”,這僅僅是靜態的,一般滾動的時候瀑布流都會添加數據,所以接下來就是添加滾動事件,只要有滾動就計算然后補充數據。

先看圖5-5的效果。
JavaScript、jQuery、HTML5、Node.js實例大全-讀書筆記4
在網上收集了一些固定寬度不固定高度的圖片,簡單設置了一下頁面的樣式,在實際項目中外觀樣式設置可能更加復雜一些,本書重點研討JavaScript,所以還是先看看其實現代碼【范例5-2】。

35. eg.getDataList = function(min,max){//模端提供擬構造數據,實際上這些數據由后
36. var lst = [],n=8;//保存數據
37. for(var i=0;i<n;i++){//每次模擬 n 條
38. var k = min + parseInt(Math.random()*(max-min));//隨機指定范圍的數
39. lst.push(k+".jpg");//拼接成字符串
40. } 
41. return lst;//返回數組
42. }; 
43. eg.cols = eg.getElementsByClassName("col");//把目標對象緩存起來
44. eg.colh = [0,0,0,0];//存取每列的高度
45. eg.getColMin = function(){//計算 4 列高度
46. var min = 0,m = {};
47. for(var i=0;i<4;i++){
48. min = parseInt(eg.cols[i].offsetHeight);
49. eg.colh[i] = min;
50. m[min] = i;
51. } 
52. return eg.cols[m[Math.min.apply(Array,eg.colh)]||0];//返回最小高度的對象
53. } 
       //追加數據的方法
54. eg.add = function(dl){
55. for(var i in dl){
56. var newDiv = document.createElement("div")
57. var newImg = document.createElement("img");
58. newImg.src = dl[i];
59. newDiv.appendChild(newImg);
60. newDiv.innerHTML += '<p>['+dl[i]+']</p>';
61. eg.getColMin().appendChild(newDiv);//追加到最小高度列里
62. } 
63. }; 
64. eg.scroll = function(){//滾動條事件處理
65. window.onscroll = function(){//onscroll,onload,onresize 只能這樣添加
66. var doc = document;
67. var top = doc.documentElement.scrollTop || doc.body.scrollTop;//滾動條到頂部的高度
68. var winH = doc.documentElement.clientHeight||doc.body.clientHeight;//可視窗口的高度
69.                    if(Math.min.apply(Array,eg.colh) < top+winH){                                    //如果最小高度小于可視區域,就補充
70. eg.add(eg.getDataList(1,35));//隨機獲取數據,并追加到最 后
71.                    }
72.           }
73.   }

上面代碼中的 eg.getElementsByClassName()方法是之前定義過的一個方法,存放在 base.js 文件 中,通過【范例 5-1】可知,默認數據很少,需要在初始化的時候補充一些,這就要在 HTML 頁面
增加一個 script 標簽,先調用 eg.getColMin()獲取已經存在的數據高度并保存到 eg.colh 數組中以便
后面判斷使用,然后調用 eg.getDataList()方法模擬一批數據,正規項目中會用 AJAX 去服務端請求, 然后把數據用 eg.add()方法追加到后面。最后還要調用一下 eg.scroll()方法綁定滾動條事件的監聽, 加入代碼是這樣的:

<script>
eg.getColMin(); //計算第一批數據的高度
var dl = eg.getDataList(5,35);              //初始化一些數據 
eg.add(dl);                                 //補充剩下的數據 
eg.scroll();                               //啟動滾動條監聽
</script>

注意:由于真實項目中,window.onscroll 事件可能會綁定多個業務,所以本例中的直接覆蓋綁 定方式不宜直接拉入項目中去,要確保沒有其他業務占用的情況下方可如此,否則可能會出現一些 意外情況,比如無法執行、某些事件被覆蓋等等。
圖片和文件放置在同一個目錄,否則請修改相應的路徑。當能夠用鼠標怎么也滾不到底的時候,
恭喜你已實現經典的固定列寬瀑布流!

最具士兵突擊實戰類型的JavaScript

JavaScript、jQuery、HTML5、Node.js實例大全-讀書筆記4

您可能感興趣的文章:
Node.js簡介與安裝開發環境教程
Node.js模塊學習教程
node.js入門實例教程
Jquery 學習筆記(一)
Jquery實戰_讀書筆記1—選擇jQuery
HTML5 File Uploads with jQuery
jQuery HTML5 Uploader
Jquery實戰_讀書筆記2 選擇器
基于JQuery 選擇器使用說明介紹
什么是Node.js?Node.js使用詳細介紹

[關閉]
北京pk赛车历史