原生JavaScript實現簡單瀑布流
阿新 • • 發佈：2018-12-11
瀑布流，想必大家都有所瞭解，簡單說就是一些等寬不等高的模組組成的頁面，可以一直進行載入，比如淘寶購物介面、百度瀏覽圖片介面，都採用了瀑布流，接下來使用原生JS程式碼進行實現。 html結構：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>waterfall</title> <link rel="stylesheet" type="text/css" href="falls.css"> <script src="falls.js"></script> </head> <body> <div id="container"> <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/16.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="img/17.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="img/18.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="img/19.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="img/20.jpg"> </div> </div> </div> </body> </html>
最初效果：
css程式碼：
*{ margin: 0; padding:0; } #container{ position: relative; } .box{ padding: 5px; float: left; } .box_img{ padding: 5px; border: 1px solid gray; box-shadow: 0 0 5px yellowgreen; border-radius: 5px; } .box_img img{ width: 200px; height: auto; }
加入CSS效果：
window.onload=function () { imgLocation("container","box") var imgData={"data":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"}, {"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"7.jpg"}]};//json塊提供圖片 window.onscroll=function () { if( checkFlag()){ var cparent=document.getElementById("container"); for( var i=0;i<imgData.data.length;i++){ var ccontent=document.createElement("div"); ccontent.className="box"; cparent.appendChild(ccontent);////加入div塊 var boximg=document.createElement("div"); boximg.className="box_img"; ccontent.appendChild(boximg);////加入div塊 var img=document.createElement("img"); img.src="img/"+imgData.data[i].src; boximg.appendChild(img);//加入圖片 } imgLocation("container","box");//呼叫給載入的圖片進行分佈 } } } function checkFlag() { //檢測最後一張圖片距離頂部距離是否小於頁面高度與滑鼠向下滑動距離 var cparent=document.getElementById("container"); var ccontent=getChildElement(cparent,"box"); var lastContenHeight=ccontent[ccontent.length-1].offsetTop;//最後一張圖片距離頂部距離 var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//滑動距離 var pageHeight=document.documentElement.clientHeight||document.body.clientHeight;//頁面距離 if(lastContenHeight<scrollTop+pageHeight){ return true; } } function imgLocation(parent,content) { //imgLocation()安放下一排排圖片位置，依次出現在上一排較低圖片的下方，其中需要計算出螢幕寬度，下一排圖片（或者邊框）距離螢幕左邊距離 var cparent=document.getElementById(parent); var ccontent=getChildElement(cparent,content); // console.log(ccontent); var imgWidth=ccontent[0].offsetWidth;//任何一個寬度 var num=Math.floor(document.documentElement.clientWidth/imgWidth);//化為整數 cparent.style.cssText="width:"+imgWidth*num+"px;margin:0 auto";//螢幕寬度，並將頁面居中 var BoxHeightArr=[];//儲存圖片高度 for(var i=0;i<ccontent.length;i++){ if(i<num){ //前排圖片的數量 BoxHeightArr[i]=ccontent[i].offsetHeight; }else{ var minheight=Math.min.apply(null,BoxHeightArr);//找到下一排最低圖片，並且加入陣列 var minIndex=getminheightLocation(BoxHeightArr,minheight); ccontent[i].style.position="absolute";//css使用絕對定位確定圖片位置 ccontent[i].style.top=minheight+"px";//位於最小圖片下方 ccontent[i].style.left=ccontent[minIndex].offsetLeft+"px";//距離左邊距離 BoxHeightArr[minIndex]=BoxHeightArr[minIndex]+ccontent[i].offsetHeight;//圖片放好後的高度 } } } function getminheightLocation(BoxHeightArr,minHeight) { for(var i in BoxHeightArr){ if(BoxHeightArr[i]==minHeight){ return i; } } } function getChildElement( parent,content) { var contentArr=[]; var allcontent=parent.getElementsByTagName("*");//利用getChildElement（"*"）將content內容存入contentArr陣列 for(var i=0;i<allcontent.length;i++){ if(allcontent[i].className==content){ contentArr.push(allcontent[i]); } } return contentArr; } /* * 1.利用getChildElement（"*"）將content內容存入contentArr陣列 * 2.imgLocation()安放下一排排圖片位置，依次出現在上一排較低圖片的下方，其中需要計算出螢幕寬度，下一排圖片（或者邊框）距離螢幕左邊距離 * */
簡單操作就用Json塊，給予圖片的載入資源。
吶~~~~這就是實現的最終效果：
