js_javascript 기술로 폭포 흐름을 구현하는 간단한 방법의 공유 예

다음은 JS를 사용하여 Waterfall Flow를 구현하는 방법에 대한 비판을 바랍니다.

코드 복사 코드는 다음과 같습니다.

<script><br>var waterFall = {<br> 컨테이너: document.getElementById("container"),<br> 컬럼 번호: 1,<br> 컬럼 너비: 210,<br> // P_001. jpg ~ P_160.jpg<br> rootImage: "test/",<br> indexImage: 0,<br><br> scrollTop: document.documentElement.scrollTop || document.body.scrollTop,<br> discoverLeft: 0, <br><br> loadFinish: false,<br><br> // 고정 형식 이미지 이름을 반환합니다.<br> getIndex: function() {<br> var index = 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><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>' ;';<br> column.appendChild(aEle); <br><br> if (index >= 160) {<br> //alert("사진이 로드 중입니다!");<br>            this.loadFinish = true;<br>        }<br><br>        return this;<br>    },<br><br>    // 页面加载初始创建<br>    생성: 함수() {<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 = 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 = self.columnNumber 시작 * i;<br>                      var index = self.getIndex();<br>                     html = html '<a href="###" class="pic_a"><img src="' self.rootImage "P_ " 인덱스 '.jpg" /><strong>' 색인 '</strong></a>';<br>                   }<br>                 html 반환;    <br>              }() <br>            '& lt;/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>    새로고침: 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; lengthStart<maxLength; lengthStart ) {<BR>            for (arrStart = 0; arrStart<this.columnNumber; arrStart ) {<BR>               if (arrTemp[arrStart][lengthStart]) {<BR>             arrHtml.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 / 이. 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>               html 열 = html열 '&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.columnNumber * line] || ');<br><br>                     return html;    <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><br>            检测<br>            this.appendDetect();<br>} <br> 반환 this; <br>}, 스크롤 : function () {<br> var self = this; <br> window.onscroll = function () {<br>            // 为提高性能，滚动前后距离大于100image素再处理<br>            var scrollTop = 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> resize: function() {<br> var self = this;<br> window.onresize = function() {<br> var eleDetect = document. ("waterFallDetect"), detectorLeft = 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>