看了網上的瀑布流教程，自己跟著寫了遍，然后總結了下知識點
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="jquery-1.8.3.min.js"/></script> <script type="text/javascript" src="script2.js"/></script> <title></title> <style type="text/css"> *{padding: 0;margin:0;} #main{ margin-top: 10px; position: relative; } .pin{ margin:0; padding:0 0 5px 3px; float:left; } .box{ padding: 10px 5px 0 5px; border:1px solid #ccc; box-shadow: 0 0 6px #ccc; border-radius: 5px; } .box img{ border:0; margin:0; width:200px; height:auto; } </style> </head> <body> <div id="main"> <div class="pin"> <div class="box"> <img src="images/1.jpg"/> </div> </div> <div class="pin"> <div class="box"> <img src="images/2.jpg"/> </div> </div> <div class="pin"> <div class="box"> <img src="images/3.jpg"/> </div> </div> <div class="pin"> <div class="box"> <img src="images/4.jpg"/> </div> </div> <div class="pin"> <div class="box"> <img src="images/5.jpg"/> </div> </div> <div class="pin"> <div class="box"> <img src="images/6.jpg"/> </div> </div> <div class="pin"> <div class="box"> <img src="images/7.jpg"/> </div> </div> <div class="pin"> <div class="box"> <img src="images/8.jpg"/> </div> </div> <div class="pin"> <div class="box"> <img src="images/9.jpg"/> </div> </div> <div class="pin"> <div class="box"> <img src="images/1.jpg"/> </div> </div> <div class="pin"> <div class="box"> <img src="images/2.jpg"/> </div> </div> <div class="pin"> <div class="box"> <img src="images/3.jpg"/> </div> </div> <div class="pin"> <div class="box"> <img src="images/4.jpg"/> </div> </div> <div class="pin"> <div class="box"> <img src="images/5.jpg"/> </div> </div> <div class="pin"> <div class="box"> <img src="images/6.jpg"/> </div> </div> <div class="pin"> <div class="box"> <img src="images/7.jpg"/> </div> </div> <div class="pin"> <div class="box"> <img src="images/8.jpg"/> </div> </div> <div class="pin"> <div class="box"> <img src="images/9.jpg"/> </div> </div> <div class="pin"> <div class="box"> <img src="images/1.jpg"/> </div> </div> <div class="pin"> <div class="box"> <img src="images/2.jpg"/> </div> </div> <div class="pin"> <div class="box"> <img src="images/3.jpg"/> </div> </div> </div> </body> </html> 用js實現部分：
window.onload=function(){ waterfall('main','box'); var dataimg={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'},{'src':'5.jpg'},{'src':'6.jpg'},{'src':'7.jpg'},{'src':'8.jpg'},{'src':'9.jpg'}]}; window.onscroll=function() { if(checkscrollside()) { var main= document.getElementById('main'); for(var i=0;i<dataimg.data.length;i++) { var pin=document.createElement('div'); pin.className='pin'; main.appendChild(pin); var box=document.createElement('div'); box.className='box'; pin.appendChild(box); var img=document.createElement('img'); img.src='images/'+dataimg.data[i].src; box.appendChild(img); } waterfall('main','box'); }; } } function $$(clsName,ele) { //如果當前瀏覽器支持通過類名獲取元素，直接返回 if(document.getElementsByClassName) { return(ele||document).getElementsByClassName(clsName); } else { //盡量把這些量存放在變量中，否則 //例如循環不用len，而用nodes.length，會每一次循環都遍歷一次 var nodes=(ele||document).getElementsByTagName("*"), eles=[], len=nodes.length i, j, currNode, clsNames, clsLen; for(i=0;i<len;i++) { currNode=nodes[i]; clsNames=currNode.className.split(' '); clsLen=clsNames.length; for(j=0;j<clsLen;j++) { if(clsNames[j]==clsName) { eles.push(currNode); break; } } } return eles; } } //知識點一：js中通過屬性offset--等，但padding,margin等只能獲取在內聯html中有的樣式， //因此，下面這個函數是獲取css樣式的通用函數。 var getStyle = function(dom, attr) { return dom.currentStyle ? dom.currentStyle[attr] : getComputedStyle(dom, false)[attr]; } function waterfall(parent,box){ var main=document.getElementById(parent); var boxes=$$(box,main); var pins=$$('pin',main); //console.log(boxes.length); var pinw=pins[0]; var boxw=boxes[0].offsetWidth+parseInt(getStyle(pinw,'paddingLeft')); console.log(boxes[0].clientWidth); //console.log(boxw+','+main.clientWidth+','+main.offsetWidth+','+getStyle(boxes[0],'margin')); var cols=Math.floor(document.documentElement.clientWidth/boxw); console.log(cols); main.style.width=cols*boxw+'px'; var boxesh=[]; for(var i=0;i<boxes.length;i++){ if(i<cols){ boxesh.push(boxes[i].offsetHeight+parseInt(getStyle(pinw,'paddingBottom'))); } else{ var minh=Math.min.apply(null,boxesh); var index=getMinIndex(boxesh,minh); boxes[i].style.position='absolute'; boxes[i].style.top=minh+'px'; boxes[i].style.left=index*boxw+'px'; boxesh[index]+=boxes[i].offsetHeight+parseInt(getStyle(pinw,'paddingLeft')); } } } function getMinIndex(arr,val){ for(var i=0;i<arr.length;i++){ if(arr[i]==val) return i; } } function checkscrollside(){ var main=document.getElementById('main'); var aPin=$$('pin',main); console.log(aPin.length); var lastPinH=aPin[aPin.length-1].offsetTop+Math.floor(aPin[aPin.length-1].offsetHeight/2); var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; var documentH=document.documentElement.clientHeight;//頁面高度 return (lastPinH<scrollTop+documentH)?true:false; } 用jQuery實現部分：
//知識點一：jquery事件綁定 $(window).on('load',function(){ waterfall(); var dataimg={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'},{'src':'5.jpg'},{'src':'6.jpg'},{'src':'7.jpg'},{'src':'8.jpg'},{'src':'9.jpg'}]}; $(window).on('scroll',function(){ if(checkScrollSlide()){ //知識點二：數組遍歷 //知識點三：value參數是DOM對象 $.each(dataimg.data,function(key,value){ //知識點四：創建DOM元素，不需要createElement('div'); //知識點五：為元素綁定class，不再是className=''; //知識點六：往元素中填充元素，不再是obj.appendChild(obj); //知識點七：屬性的獲取和設置，可以直接用attr (注意這是針對jquey對象的方法)； var oBox=$('<div>').addClass('pin').appendTo($('#main')); var oPic=$('<div>').addClass('box').appendTo($(oBox)); $('<img>').attr('src','images/'+value.src).appendTo($(oPic)); }) waterfall(); } }) }) function waterfall(){ var $boxs=$('#main>.pin'); //知識點八：jquery中的outerWidth(false)方法==js中的offsetWidth屬性 //innerWidth()==clientWidth; //width()==width; var w=$boxs.eq(0).outerWidth(false); //console.log(w); var cols=Math.floor($(window).width()/w); //知識點九：jquery可以直接css(),js是obj,style.margin: ect; $('#main').width(cols*w).css('margin','10px auto'); var hArr=[]; //注意，這兒value是DOM對象 $boxs.each(function(index,value){ var h=$boxs.eq(index).outerHeight(false); if(index<cols){ hArr.push(h); }else{ var minH=Math.min.apply(null,hArr); //知識點十：jquey中直接封裝了一個數組中找取某個值對應下標的方法 var minHIndex=$.inArray(minH,hArr); $(value).css({ 'position':'absolute', 'top':minH+'px', 'left':minHIndex*w+'px', }); hArr[minHIndex]+=$boxs.eq(index).outerHeight(false); } }) //console.log(hArr); } function checkScrollSlide(){ //知識點十一：可以直接last()方法獲取最后一個元素 var $lastBox=$('#main>div').last(); //知識點十二：js中的一系列offsetTop等屬性，變成了jquey中的offset().top ect; var lastBoxDis=$lastBox.offset().top+Math.floor($lastBox.outerHeight(false)/2); var scrollTop=$(window).scrollTop(); var documentH=$(window).height(); return (lastBoxDis<scrollTop+documentH)?true:false; } 以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
