瀑布流佈局js
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>瀑布流佈局測試</title> <style> body { background-color: #eee; font-size: 84%; text-align: justify; } .column { display: inline-block; vertical-align: top; } .pic_a { display: block; padding: 5px; margin-bottom: 10px; border: 1px solid #ccc; background-color: #fff; text-decoration: none; } .pic_a img { display: block; margin: 0 auto 5px; border: 0; vertical-align: bottom; } .pic_a strong { color: #333; } </style></head><body><div id="container"></div><script> var waterFall = { container: document.getElementById("container"), columnNumber: 1, columnWidth: 210, // P_001.jpg ~ P_160.jpg rootImage: "http://cued.xunlei.com/demos/publ/img/", indexImage: 0, scrollTop: document.documentElement.scrollTop || document.body.scrollTop, detectLeft: 0, loadFinish: false, // 返回固定格式的圖片名 getIndex: function() { var index = this.indexImage; if (index < 10) { index = "00" + index; } else if (index < 100) { index = "0" + index; } return index; }, // 是否滾動載入的檢測 appendDetect: function() { var start = 0; for (start; start < this.columnNumber; start++) { var eleColumn = document.getElementById("waterFallColumn_" + start); if (eleColumn && !this.loadFinish) { if (eleColumn.offsetTop + eleColumn.clientHeight < this.scrollTop + (window.innerHeight || document.documentElement.clientHeight)) { this.append(eleColumn); } } } return this; }, // 滾動載入 append: function(column) { this.indexImage += 1; var html = '', index = this.getIndex(), imgUrl = this.rootImage + "P_" + index + ".jpg"; // 圖片尺寸 var aEle = document.createElement("a"); aEle.href = "###"; aEle.className = "pic_a"; aEle.innerHTML = '<img src="'+ imgUrl +'" /><strong>'+ index +'</strong>'; column.appendChild(aEle); if (index >= 160) { //alert("圖片加載光光了！"); this.loadFinish = true; } return this; }, // 頁面加載初始建立 create: function() { this.columnNumber = Math.floor(document.body.clientWidth / this.columnWidth); var start = 0, htmlColumn = '', self = this; for (start; start < this.columnNumber; start+=1) { htmlColumn = htmlColumn + '<span id="waterFallColumn_'+ start +'" class="column" style="width:'+ this.columnWidth +'px;">'+ function() { var html = '', i = 0; for (i=0; i<5; i+=1) { self.indexImage = start + self.columnNumber * i; var index = self.getIndex(); html = html + '<a href="###" class="pic_a"><img src="'+ self.rootImage + "P_" + index +'.jpg" /><strong>'+ index +'</strong></a>'; } return html; }() + '</span> '; } htmlColumn += '<span id="waterFallDetect" class="column" style="width:'+ this.columnWidth +'px;"></span>'; this.container.innerHTML = htmlColumn; this.detectLeft = document.getElementById("waterFallDetect").offsetLeft; return this; }, refresh: function() { var arrHtml = [], arrTemp = [], htmlAll = '', start = 0, maxLength = 0; for (start; start < this.columnNumber; start+=1) { var arrColumn = document.getElementById("waterFallColumn_" + start).innerHTML.match(/<a(?:.|\n|\r|\s)*?a>/gi); if (arrColumn) { maxLength = Math.max(maxLength, arrColumn.length); // arrTemp是一個二維數組 arrTemp.push(arrColumn); } } // 須要從新排序 var lengthStart, arrStart; for (lengthStart = 0; lengthStart<maxLength; lengthStart++) { for (arrStart = 0; arrStart<this.columnNumber; arrStart++) { if (arrTemp[arrStart][lengthStart]) { arrHtml.push(arrTemp[arrStart][lengthStart]); } } } if (arrHtml && arrHtml.length !== 0) { // 新欄個數 this.columnNumber = Math.floor(document.body.clientWidth / this.columnWidth); // 計算每列的行數 // 向下取整 var line = Math.floor(arrHtml.length / this.columnNumber); // 從新組裝HTML var newStart = 0, htmlColumn = '', self = this; for (newStart; newStart < this.columnNumber; newStart+=1) { htmlColumn = htmlColumn + '<span id="waterFallColumn_'+ newStart +'" class="column" style="width:'+ this.columnWidth +'px;">'+ function() { var html = '', i = 0; for (i=0; i<line; i+=1) { html += arrHtml[newStart + self.columnNumber * i]; } // 是否補足餘數 html = html + (arrHtml[newStart + self.columnNumber * line] || ''); return html; }() + '</span> '; } htmlColumn += '<span id="waterFallDetect" class="column" style="width:'+ this.columnWidth +'px;"></span>'; this.container.innerHTML = htmlColumn; this.detectLeft = document.getElementById("waterFallDetect").offsetLeft; // 檢測 this.appendDetect(); } return this; }, // 滾動加載 scroll: function() { var self = this; window.onscroll = function() { // 爲提升性能，滾動先後距離大於100像素再處理 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; if (!this.loadFinish && Math.abs(scrollTop - self.scrollTop) > 100) { self.scrollTop = scrollTop; self.appendDetect(); } }; return this; }, // 瀏覽器窗口大小變換 resize: function() { var self = this; window.onresize = function() { var eleDetect = document.getElementById("waterFallDetect"), detectLeft = eleDetect && eleDetect.offsetLeft; if (detectLeft && Math.abs(detectLeft - self.detectLeft) > 50) { // 檢測標籤偏移異常，認爲佈局要改變 self.refresh(); } }; return this; }, init: function() { if (this.container) { this.create().scroll().resize(); } } }; waterFall.init();</script></body></html>
相關文章
- 1. js 瀑布流佈局
- 2. JS 瀑布流佈局
- 3. JS瀑布流佈局
- 4. Masonry JS瀑布流佈局
- 5. 瀑布流佈局
- 6. JS瀑布流佈局模式(1)
- 7. js實現瀑布流佈局
- 8. JS瀑布流佈局模式(2)
- 9. js瀑布流
- 10. 瀑布流佈局淺析
- 更多相關文章...
- • ASP.NET Web Pages - 頁面佈局 - ASP.NET 教程
- • ASP.NET MVC - 樣式和佈局 - ASP.NET 教程
- • JDK13 GA發佈：5大特性解讀
- • 再有人問你分佈式事務，把這篇扔給他
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. js 瀑布流佈局
- 2. JS 瀑布流佈局
- 3. JS瀑布流佈局
- 4. Masonry JS瀑布流佈局
- 5. 瀑布流佈局
- 6. JS瀑布流佈局模式(1)
- 7. js實現瀑布流佈局
- 8. JS瀑布流佈局模式(2)
- 9. js瀑布流
- 10. 瀑布流佈局淺析