HTMl源碼
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="css/mycss.css"/> <script type="text/javascript" src="js/myjs.js"></script> <title>瀑布流演示</title> </head> <body> <div id="content"> <div class="box"> <div class="box_img"> <img src="img/1.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/2.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/3.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/4.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/5.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/6.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/7.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/8.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/9.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/10.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/11.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/12.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/13.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/14.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/15.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/1.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/2.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/3.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/4.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/5.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/6.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/7.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/8.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/9.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/10.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/11.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/12.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/13.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/14.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/15.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/1.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/2.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/3.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/4.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/5.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/6.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/7.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/8.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/9.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/10.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/11.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/12.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/13.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/14.jpg"/> </div> </div> <div class="box"> <div class="box_img"> <img src="img/15.jpg"/> </div> </div> </div> </body> </html>
CSS源碼
*{ margin: 0px; padding: 0px; } body{ width: 100%; height: 100%; } .box{ position: relative; width: 160px; height: auto; float: left; } .box_img{ position: relative; width: 150px; height: auto; border: 1px solid silver; border-radius: 5px; box-shadow: 0px 0px 5px silver; margin: 5px 5px; } .box_img img{ width: 150px; height: auto; }
js源碼
/** * Created by Administrator on 2015/5/4. */ window.οnlοad=function(){ imgLocation("content","box"); window.onscroll=function(){ var imgData={"data":[{"src":"img/1.jpg"},{"src":"img/2.jpg"},{"src":"img/3.jpg"}, {"src":"img/4.jpg"},{"src":"img/5.jpg"},{"src":"img/6.jpg"},{"src":"img/7.jpg"} ,{"src":"img/8.jpg"},{"src":"img/9.jpg"},{"src":"img/10.jpg"},{"src":"img/11.jpg"}, {"src":"img/12.jpg"},{"src":"img/13.jpg"},{"src":"img/14.jpg"},{"src":"img/15.jpg"}]} if(getImgFlg("content","box")){ loadingPictures("content","box",imgData); imgLocation("content","box"); } } } //確定所有圖片的位置 function imgLocation(parent,content){ var cparent=$(parent,"id"); //找到所有圖片的盒子 var imgBoxArrs=imgBoxArr(cparent,content); //找到盒子的寬度 var imgBoxWidth=imgBoxArrs[0].offsetWidth; //獲取屏幕的寬度 var cparentWidth=window.screen.width; //計算每一行可以放多少個圖片，並固定圖片。不會隨着瀏覽器寬度的變化而改變 var num=parseInt(cparentWidth/imgBoxWidth); cparent.style.width=num*imgBoxWidth+"px"; cparent.style.margin=0+"px auto"; //找到第一行最小的圖片高度，然後將第二行的第一個圖片的位置放在第一行最小高度圖片的位置下，以此類推 var imgHeightArrs=[]; for(var i=0;i<imgBoxArrs.length;i++){ if(i<num){ imgHeightArrs.push(imgBoxArrs[i].offsetHeight); }else{ var min=minHeightArrs(imgHeightArrs); var indexBox=imgMinHeightBoxIndex(imgHeightArrs,min); imgBoxArrs[i].style.position="absolute"; imgBoxArrs[i].style.left=imgBoxArrs[indexBox].offsetLeft+"px"; imgBoxArrs[i].style.top=min+"px"; imgHeightArrs[indexBox]=min+imgBoxArrs[i].offsetHeight; } } } //標記是否開始加載圖片 function getImgFlg(parent,content){ //隱藏部分的高度 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var cparent=$(parent,"id"); var ccontent=imgBoxArr(cparent,content); //最後一張圖片距離頂部的高度 var lastImgHeight=ccontent[ccontent.length-1].offsetTop; //圖片可見區域的高度 var pageHeight=document.documentElement.clientHeight||document.body.clientHeight; if((pageHeight+scrollTop)>lastImgHeight){ return true; } } function loadingPictures(parent,content,imgData){ var cparent=$(parent,"id"); for(var i=0;i<imgData.data.length;i++){ for(var key in imgData.data[i]){ if(key==="src"){ var imgSrc=imgData.data[i][key]; var boxDIV=document.createElement("div"); boxDIV.className="box"; cparent.appendChild(boxDIV); var boxImgDIV=document.createElement("div"); boxImgDIV.className="box_img"; boxDIV.appendChild(boxImgDIV); var imgz=document.createElement("img"); imgz.src=imgSrc; boxImgDIV.appendChild(imgz); } } } } //找到最小高度圖片盒子的位置 function imgMinHeightBoxIndex(imgHeightArrs,min){ for(var i in imgHeightArrs){ if(imgHeightArrs[i]===min){ return i; } } } //從數組中找出最小值並返回 function minHeightArrs(imgHeightArrs){ var min=imgHeightArrs[0]; for(var i=0;i<imgHeightArrs.length-1;i++){ if(min>imgHeightArrs[i+1]){ min=imgHeightArrs[i+1]; } } return min; } //找到每一個圖片的盒子並返回數組 function imgBoxArr(parent,content){ var imgBoxArr=[]; var ccontent=parent.getElementsByTagName("*"); for(var i=0;i<ccontent.length;i++){ if(ccontent[i].className===content){ imgBoxArr.push(ccontent[i]); } } return imgBoxArr; } /* 將getElementById 進行封裝 */ function $(){ if(arguments.length!==2){ throw new Error("參數必須是兩個參數"); }else{ switch(arguments[1]){ case "id": return document.getElementById(arguments[0]); break; case "name": return document.getElementsByName(arguments[0]); break; case "tag": return document.getElementsByTagName(arguments[0]); break; default : throw new Error("第二個參數只接受id,name,tag 中的一個！"); } } }
