本篇内容实现类似百度图片的呈现功能，瀑布流+自动加载
index13.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>uvi</title> 6 <link rel="stylesheet" href="style2.css" type="text/css"> 7 <script src="myjs.js"></script> 8 </head> 9 <body> 10 <div id="container"> 11 <div class="box"> 12 <div class="box_img"> 13 <img src="img.jpg"> 14 </div> 15 </div> 16 <div class="box"> 17 <div class="box_img"> 18 <img src="img2.jpg"> 19 </div> 20 </div> 21 <div class="box"> 22 <div class="box_img"> 23 <img src="img3.jpg"> 24 </div> 25 </div> 26 <div class="box"> 27 <div class="box_img"> 28 <img src="img4.jpg"> 29 </div> 30 </div> 31 <div class="box"> 32 <div class="box_img"> 33 <img src="img5.jpg"> 34 </div> 35 </div> 36 <div class="box"> 37 <div class="box_img"> 38 <img src="img6.jpg"> 39 </div> 40 </div> 41 <div class="box"> 42 <div class="box_img"> 43 <img src="img7.jpg"> 44 </div> 45 </div> 46 <div class="box"> 47 <div class="box_img"> 48 <img src="img8.jpg"> 49 </div> 50 </div> 51 <div class="box"> 52 <div class="box_img"> 53 <img src="img9.jpg"> 54 </div> 55 </div> 56 <div class="box"> 57 <div class="box_img"> 58 <img src="img3.jpg"> 59 </div> 60 </div> 61 <div class="box"> 62 <div class="box_img"> 63 <img src="img4.jpg"> 64 </div> 65 </div> 66 <div class="box"> 67 <div class="box_img"> 68 <img src="img5.jpg"> 69 </div> 70 </div> 71 <div class="box"> 72 <div class="box_img"> 73 <img src="img6.jpg"> 74 </div> 75 </div> 76 <div class="box"> 77 <div class="box_img"> 78 <img src="img7.jpg"> 79 </div> 80 </div> 81 <div class="box"> 82 <div class="box_img"> 83 <img src="img8.jpg"> 84 </div> 85 </div> 86 <div class="box"> 87 <div class="box_img"> 88 <img src="img9.jpg"> 89 </div> 90 </div> 91 <div class="box"> 92 <div class="box_img"> 93 <img src="img3.jpg"> 94 </div> 95 </div> 96 <div class="box"> 97 <div class="box_img"> 98 <img src="img4.jpg"> 99 </div> 100 </div> 101 <div class="box"> 102 <div class="box_img"> 103 <img src="img5.jpg"> 104 </div> 105 </div> 106 <div class="box"> 107 <div class="box_img"> 108 <img src="img6.jpg"> 109 </div> 110 </div> 111 <div class="box"> 112 <div class="box_img"> 113 <img src="img7.jpg"> 114 </div> 115 </div> 116 <div class="box"> 117 <div class="box_img"> 118 <img src="img8.jpg"> 119 </div> 120 </div> 121 <div class="box"> 122 <div class="box_img"> 123 <img src="img9.jpg"> 124 </div> 125 </div> 126 127 128 </div> 129 </div> 130 131 </body> 132 </html>
css代码:
1 *{ 2 margin:0px; 3 padding:0px; 4 } 5 #container{ 6 position:relative; 7 8 } 9 .box{ 10 padding: 5px; 11 float: left; 12 } 13 .box_img{ 14 padding:5px; 15 border:1px solid #cccccc; 16 box-shadow:0 0 5px #cccccc; 17 border-radius:5px; 18 } 19 .box_img img{ 20 1000px; 21 height:auto; 22 }
js代码
1 window.onload = function(){ 2 imgLocation("container","box"); 3 var imgData={"data":[{"src":"img.jpg"},{"src":"img2.jpg"},{"src":"img3.jpg"}]}; 4 window.onscroll = function(){//监听滚动条 5 if(checkFlag()){ 6 var cparent = document.getElementById("container"); 7 for(var i=0;i<imgData.data.length;i++){ 8 var ccontent = document.createElement("div"); 9 ccontent.className = "box"; 10 cparent.appendChild(ccontent); 11 var boximg = document.createElement("div"); 12 boximg.className = "box_img"; 13 ccontent.appendChild(boximg); 14 var img = document.createElement("img"); 15 img.src = imgData.data[i].src; 16 boximg.appendChild(img); 17 } 18 imgLocation("container","box"); 19 } 20 } 21 } 22 23 function checkFlag(){ 24 var cparent = document.getElementById("container"); 25 var ccontent = getChildElement(cparent, "box"); 26 var lastContentHeight = ccontent[ccontent.length-1].offsetTop;//获取最后一张照片距离顶部的高度 27 var scrollTop = document.documentElement.scrollTop||document.body.scrollTop; 28 var pageHeight = document.documentElement.clientHeight||document.body.clientHeight; 29 if(lastContentHeight<scrollTop+pageHeight){ 30 return true; 31 } 32 33 } 34 35 function imgLocation(parent,content){ 36 //将parent下的所有content全部取出 37 var cparent = document.getElementById(parent); 38 var ccontent = getChildElement(cparent,content); 39 var imgWidth = ccontent[0].offsetWidth; 40 var num =Math.floor(document.documentElement.clientWidth/imgWidth); 41 cparent.style.cssText = ""+imgWidth*num+"px;margin:0px auto"; 42 43 var BoxHeightArr = []; 44 for(var i = 0;i<ccontent.length;i++){ 45 if(i<num){ 46 BoxHeightArr[i] = ccontent[i].offsetHeight; 47 }else{ 48 var minHeight = Math.min.apply(null,BoxHeightArr);//获得最小高度 49 var minIndex = getminheightLocation(BoxHeightArr,minHeight); 50 ccontent[i].style.position = "absolute"; 51 ccontent[i].style.top = minHeight+"px"; 52 ccontent[i].style.left = ccontent[minIndex].offsetLeft+"px"; 53 BoxHeightArr[minIndex] = BoxHeightArr[minIndex]+ccontent[i].offsetHeight; 54 } 55 } 56 } 57 58 function getminheightLocation(BoxHeightArr,minHeight){ 59 for(var i in BoxHeightArr){ 60 if(BoxHeightArr[i]==minHeight){ 61 return i; 62 } 63 } 64 } 65 66 function getChildElement(parent,content){ 67 var contentArr = []; 68 var allcontent = parent.getElementsByTagName("*"); 69 for(var i =0;i<allcontent.length;i++){ 70 if(allcontent[i].className==content){ 71 contentArr.push(allcontent[i]); 72 } 73 } 74 return contentArr; 75 }