这段事件找工作,闲暇也在学习一下HTML5不学习就要被时代淘汰啊!这里呢是一个JS瀑布流的Demo 首先创建一个index.js的文件然后添加
window.onload=function(){ var imgData={"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"},{"src":"10.jpg"}]} addImag(imgData); addImag(imgData); addImag(imgData); window.onscroll=function(){//监听滚动条 if(checkFlag()){ addImag(imgData); } } } //动态添加图片 function addImag(imgData){ var cparent=document.getElementById("contd"); for(var i=0;i<imgData.data.length;i++){ var ccontent=document.createElement("div");//动态创建div ccontent.className="whdi";//指定class cparent.appendChild(ccontent);//加载根视图创建子节点 var boximg=document.createElement("div");//动态创建div boximg.className="txid";//指定class ccontent.appendChild(boximg);//加载根视图创建子节点 var img=document.createElement("img"); img.src="img/"+imgData.data[i].src;//加载src数据 boximg.appendChild(img); } imgLocation("contd","whdi") } function checkFlag(){//是否允许加载 var cparent=document.getElementById("contd");//得到父级控件 var ccontent=getChildElement(cparent,"whdi");//得到每一个控件 var lastContentHeight=ccontent[ccontent.length-1].offsetTop;//最后一张图片距顶部的高度 var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//未显示部分的高度 var pageHeight=document.documentElement.clientHeight||document.body.clientHeight;//页面高度 //console.log(lastContentHeight+":"+scrollTop+":"+pageHeight); if(lastContentHeight<scrollTop+pageHeight){ return true; } } function imgLocation(parent,content){//传入父级控件,及内容 //parent 下所有的content全部取出 var cparent=document.getElementById(parent);//得到父级控件 var ccontent=getChildElement(cparent,content);//得到每一个控件 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 minheigh=Math.min.apply(null,BoxHeightArr);//数组中的最小高度 var minIndex= getminheightLocation(BoxHeightArr,minheigh);//得到最小高度的位置 ccontent[i].style.position="absolute";//设置布局绝对位置 ccontent[i].style.top=minheigh+"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("*");//得到子级控件所有数据 for(var i=0;i<allcontent.length;i++){ if(allcontent[i].className==content){ contentArr.push(allcontent[i]);//向其末尾添加 } } return contentArr; }
方法在这,注释我也写的挺清楚的
然后再添加的CSS
*{ padding: 0px; margin: 0px; } #contd{ } .whdi{ padding: 5px; float: left; } .txid{ padding: 5px; border: 1px solid #cccccc; border-shadow: 0 0 5px #ccc; border-radius: 5px; } .whdi img{ width: 270px; height: auto; }
添加HTML文件
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link href="css/index.css" rel="stylesheet" type="text/css"/> <script src="js/index.js"></script> </head> <body> <div id="contd"> <div class="whdi"> <div class="txid"> <img src="img/1.jpg"> </div> </div> <div class="whdi"> <div class="txid"> <img src="img/2.jpg"> </div> </div> <div class="whdi"> <div class="txid"> <img src="img/3.jpg"> </div> </div> <div class="whdi"> <div class="txid"> <img src="img/4.jpg"> </div> </div> <div class="whdi"> <div class="txid"> <img src="img/5.jpg"> </div> </div> <div class="whdi"> <div class="txid"> <img src="img/6.jpg"> </div> </div> <div class="whdi"> <div class="txid"> <img src="img/7.jpg"> </div> </div> <div class="whdi"> <div class="txid"> <img src="img/8.jpg"> </div> </div> <div class="whdi"> <div class="txid"> <img src="img/9.jpg"> </div> </div> <div class="whdi"> <div class="txid"> <img src="img/10.jpg"> </div> </div> </div> </body> </html>图片资源的话放在一个img的文件夹下就可以了!基本上CP就能用!OK搞定