1、HTML文件
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>js瀑布流</title><link rel="stylesheet" type="text/CSS" href="mystyle.css"><script src="myjs.js"></script></head><body> <div id="container"> <div class="box"> <div class="box_img"> <img src="image/a (10).jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="image/a (11).jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="image/a (12).jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="image/a (13).jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="image/a (14).jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="image/a (15).jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="image/a (16).jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="image/a (17).jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="image/a (18).jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="image/a (16).jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="image/a (17).jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="image/a (16).jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="image/a (17).jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="image/a (16).jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="image/a (17).jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="image/a (16).jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="image/a (17).jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="image/a (16).jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="image/a (16).jpg"> </div> </div> <div class="box"> <img src="image/a (17).jpg"> <div class="box_img"> </div> </div> </div></body></html>2、js文件window.onload=function(){imglocation("container","box"); var imgData={"data":[{"src":"a (10).jpg"},{"src":"a (11).jpg"},{"src":"a (12).jpg"},{"src":"a (13).jpg"},{"src":"a (4).jpg"},{"src":"a (15).jpg"},{"src":"a (6).jpg"}]} window.onscroll=function(){ if( checkFlag()){ var cparent=document.getElementById("container"); for(var i=0;i<imgData.length;i++){ var ccontent=document.createElement("div"); ccontent.className="box"; cparent.appendChild(ccontent); var boximg=document.createElement("div"); boximg.className="box_img"; ccontent.appendChild(boximg); var img=document.createElement("img"); img.src="image/"+imgData.data[i].src; boximg.appendChild(img); } imglocation("container","box"); } }}function checkFlag(){ var cparent=document.getElementById("container"); var ccontent=getChildelement(cparent,"box"); var lastcontntheight=ccontent[ccontent.length-1].offsetTop; var scrolltop=document.documentElement.scrollTop||document.body.scrollTop; var pageheight=document.documentElement.clientHeight||document.body.clientHeight; if(lastcontntheight<scrolltop+pageheight){ return true; }}function imglocation(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 BoxHeighrArr=[]; for(var i=0;i<ccontent.length;i++){ if(i<num){ BoxHeighrArr[i]=ccontent[i].offsetHeight; }else{ var minheight=Math.min.apply(null,BoxHeighrArr); var minIndex=getminheightLocation(BoxHeighrArr,minheight); ccontent[i].style.position="absolute"; ccontent[i].style.top=minheight="px"; ccontent[i].style.left=ccontent[minIndex].offsetLeft+"px"; BoxHeighrArr[minIndex]=BoxHeighrArr[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;}3、css文件*{ margion:0px; padding:0px;}#container{ position:relative;}.box{ padding:5px; float:left;}.box_img{ padding:5px; border:1px solid #cccccc; box-shadow: 0 0 5px #cccccc; border-radius: 5px;}.box_img img{ width:100px; height:auto;}
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
