js實現(xiàn)瀑布流的一種簡單方法實例分享
下面奉上一則用JS實現(xiàn)瀑布流的方法，望批評。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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: "test/",
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;
},
// 頁面加載初始創(chuàng)建
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是一個二維數(shù)組
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) {
// 新欄個數(shù)
this.columnNumber = Math.floor(document.body.clientWidth / this.columnWidth);
// 計算每列的行數(shù)
// 向下取整
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];
}
// 是否補足余數(shù)
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) {
// 檢測標(biāo)簽偏移異常，認(rèn)為布局要改變
self.refresh();
}
};
return this;
},
init: function() {
if (this.container) {
this.create().scroll().resize();
}
}
};
waterFall.init();
</script>
</body>
</html>
相關(guān)文章
bootstrap學(xué)習(xí)使用（導(dǎo)航條、下拉菜單、輪播、柵格布局等）
這篇文章主要為大家詳細(xì)介紹了bootstrap框架、導(dǎo)航條、下拉菜單、輪播廣告carousel、柵格系統(tǒng)布局、標(biāo)簽頁tabs等相關(guān)資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
Bootstrap 是一個用于快速開發(fā) Web 應(yīng)用程序和網(wǎng)站的前端框架。這篇文章主要介紹了BootStrap的JS插件之輪播效果案例詳解的相關(guān)資料,需要的朋友可以參考下2016-05-05
用javascript實現(xiàn)自定義標(biāo)簽
用javascript實現(xiàn)自定義標(biāo)簽...2007-05-05![js中訪問html中iframe的文檔對象的代碼[IE6,IE7,IE8,FF]](http://img.jbzj.com/images/xgimg/bcimg3.png)
js中訪問html中iframe的文檔對象的代碼[IE6,IE7,IE8,FF]
W3C的標(biāo)準(zhǔn)告訴我們，可以通過Dom對象的contentDocument屬性來返回文檔對象。2011-01-01
javascript檢查瀏覽器是否已經(jīng)啟用XX功能
本文給大家分享的是檢測瀏覽器是否支持cookie功能，檢查瀏覽器是否已經(jīng)啟用Java支持功能以及獲取當(dāng)前瀏覽器的信息，十分的實用，有需要的小伙伴可以參考下。2015-07-07
數(shù)組去重，一般需求是給你一個數(shù)組，調(diào)用去重方法，返回數(shù)值副本，副本中沒有重復(fù)元素。下面腳本之家小編給大家?guī)砹薺s數(shù)組去重的多種方法，非常不錯，需要的朋友參考下2017-09-09
JavaScript實現(xiàn)動態(tài)網(wǎng)頁時鐘
這篇文章主要介紹了JavaScript實現(xiàn)動態(tài)網(wǎng)頁時鐘，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
這篇文章主要介紹了javascript實現(xiàn)小型區(qū)塊鏈功能，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
通過JS查看到一個頁面有些什么對象的實現(xiàn)代碼2008-04-04
JS實現(xiàn)禁止用戶使用Ctrl+鼠標(biāo)滾輪縮放網(wǎng)頁的方法
這篇文章主要介紹了JS實現(xiàn)禁止用戶使用Ctrl+鼠標(biāo)滾輪縮放網(wǎng)頁的方法,涉及javascript頁面元素與事件相關(guān)操作技巧,需要的朋友可以參考下2017-04-04