js_javascriptスキルでウォーターフォールフローを実装する簡単な方法のサンプル共有

以下はJSを使ったウォーターフォールフローの実装方法です。ご批判いただければ幸いです。

コードをコピー コードは次のとおりです:

<script><br>var WaterFall = {<br>container:document.getElementById("container"),<br>columnNumber:1,<br>columnWidth:210,<br> // P_001. jpg ~ P_160.jpg<br> rootImage: "test/",<br>indexImage: 0,<br><br>scrollTop: document.documentElement.scrollTop || detectLeft: 0, <br><br> loadFinish: false,<br><br> // 固定形式のイメージ名を返します<br> getIndex: function() {<br> varindex = this.indexImage;<br> if (index &lt ; 10) {<br> インデックス = "00" インデックス; 🎜> },<br><br> // スクロール読み込みの検出 <br> appendDetect: function() {<br> var start = 0;<br> for (start; start < this.columnNumber; start ) { <BR> var eleColumn = document.getElementById("waterFallColumn_" start);<br> if (eleColumn && !this.loadFinish) {<br> eleColumn.offsetTop eleColumn .clientHeight & lt; this.scrollTop (window.innerHeight | | document.documentElement.clientHeight)) {<BR> this.append(eleColumn);<BR> }<BR> }<BR><BR> return this;<BR> },<BR><BR> // スクロール読み込み <BR> append: function(column) {<BR> this.indexImage = 1;<br> var html = '',index = this .getIndex(), imgUrl = this.rootImage "P_"index ".jpg";<br><BR> // 画像サイズ<br> var aEle = document.createElement("a");<br> aEle.href = "###";<BR> aEle.className = "pic_a";<BR> aEle.innerHTML = '<img src="' imgUrl '" /><strong>' インデックス '</strong&gt ;';<BR> column.appendChild(aEle); <br><br> if (index >= 160) {<BR> //alert("画像を読み込み中です!");<BR> this.loadFinish = true;<BR> }<br><br> return this;<BR> },<br><br> // 页面加ダウンロード初创建<BR> create: function() {<BR> this.columnNumber = Math.floor(document.body.clientWidth / this.columnWidth);<br><br> var start = 0, htmlColumn = '', self = this;<BR> for (start; start < this.columnNumber; start =1) {<BR> htmlColumn '<span id="waterFallColumn_' start '" class="column" style="width:' this.columnWidth 'px;"> ' <br> function() {<br> var html = '', i = 0;<br> for (i=0; i self.indexImage = start self.columnNumber * i;<br> varindex = self.getIndex();<br> html = html '<a href="###" class="pic_a"><img src="' self.rootImage "P_ " インデックス '.jpg" /><strong>' インデックス '</strong></a>';<br> }<br> return <br> }() <br> '</span> '; <br> }<br> htmlColumn = '<span id="waterFallDetect" class="column" style="width:' this.columnWidth 'px;"></span>';<br><br> this.container.innerHTML = htmlColumn; <br><br> this.detectLeft = document.getElementById("waterFallDetect").offsetLeft;<br> return this;<br> },<br><br> fresh: function() {<br> var arrHtml = [], arrTemp = [], htmlAll = '', start = 0, maxLength = 0;<br> for (start; start < this.columnNumber; start =1) {<BR> var arrColumn = document.getElementById( "waterFallColumn_" start).innerHTML.match(/<a(?:.|n|r|s)*?a>/gi);<br> if (arrColumn) {<br> maxLength = Math.max( maxLength, arrColumn.length);<br> // arrTemp は一二二维数组<br> arrTemp.push(arrColumn);<br> }<br> }<br><br> // 必要重新排序<br> var lengthStart, arrStart;<br> for (lengthStart = 0;長さ開始 for (arrStart = 0; arrStart<this.columnNumber; arrStart ) {<BR> if (arrTemp[arrStart][lengthStart]) {<BR> arrHt ml.push(arrTemp[arrStart][lengthStart]) ;    <BR> }<BR> } <BR> }<br><br> <BR> if (arrHtml && arrHtml.length !== 0) {<BR> // 新栏个数 <BR> this.columnNumber = Math.floor(docu ment.body.clientWidth / this. columnWidth);<br><br> // 計算列の行数<BR> // 向下取整<BR> var line = Math.floor(arrHtml.length / this.columnNumber);<br><br> // 重新構成HTML<BR> var newStart = 0, htmlColumn = '', self = this;<BR> for (newStart; newStart < this.columnNumber; newStart =1) {<BR> htmlColumn = htmlColumn '&lt ;span id="waterFallColumn_' newStart '" class="column" style="width:' this.columnWidth 'px;">' <br> function() {<br> var html = '', i = 0;<br> for (i=0; i<line i="1)"> html = arrHtml[newStart self.columnNumber * i];<br> }<br> // 否补足余数<br> html = html (arrHtml[newStart self.column番号 * 行] || '');<br><br> return html;    <br> }() <br> ' ';    <br> }<br> htmlColumn = '<span id="waterFallDetect" class="column" style="width:' this.columnWidth 'px;"></span>';<br><br> this.container.innerHTML = htmlColumn;<br><br> this.detectLeft = document.getElementById("waterFallDetect").offsetLeft;<br><br> // 检测<br> this.appendDetect();<br> }<br> return this;<br> },<br><br> // 滚アニメーション加ダウンロード<br> scroll: function() {<br> var self = this;<br> window.onscroll = function() {<br> // 提高性能、滚動前後距離离大以上 100 像素再処理<br> varscrollTop = document.documentElement.scrollTop || document.body.scrollTop;<br> if (!this.loadFinish && Math.abs(scrollTop - self.scrollTop) > 100) {<br> self.scrollTop =scrollTop;<br> self.appendDetect();    <br> }<br><br> };<br> これを返す;<br> },<br><br> // ブラウザ ウィンドウ サイズ変更<br>size:function() {<br> var self = this;<br> window.onresize = function() {<br> var eleDetect = getElementById. ("waterFallDetect"), detectLeft = eleDetect && eleDetect.offsetLeft;<br> if (detectLeft && Math.abs(detectLeft - self.detectLeft) > 50) {<br> // ラベルのオフセット異常を検出、レイアウトを考慮 変更するには<br> if (this.container) { <br> this.create().scroll().resize(); <br> }<br> }<br>};<br>waterFall.init();<br></script>