你的位置:首页 > Java教程

[Java教程]用js实现图片自动加载的瀑布流效果


  向下滑动网页的时候能够自动加载图片并显示。

 

  盛放图片的盒子模型如下:

    <div class="box">      <div class="box_img">        <img src="Img/8.jpg">      </div>    </div>

  设置img-width为150px,然后box_img添加内边距和阴影效果,box的外边距为0,添加内边距。盒子的宽度是由img-width和边距撑开的。也就是说盒子之间是没有间距的,但是盒子内部有一些边距的效果。这样在js设置位置的时候就不用考虑边距问题,直接调用box的宽度就可以了。

  设置盛放所有box的div的position为relative,这样在设置top值或是left值的时候,就不用考虑最外层的margin属性。

  放置图片的位置:获得第一行图片的高度并且存放在数组里面,接下来的图片设置position为absolute,放置在高度最小的图片的下面,然后设置top和left,并且把数组的最小值加上新放置的图片的高度。也就是说HTML里面原始放置的图片除了第一行以外,其他的图片都是在js里面又重新定位的。

  当滑动页面到底部的时候触发事件函数,紧接着放置一些图片,这样保证图片的无限加载。

  HTML文件:

 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4   <meta charset="UTF-8"> 5   <title></title> 6   <link rel="stylesheet" href="waterfall.css" type="text/css"> 7   <script src="waterfall.js"></script> 8 </head> 9 <body> 10   <div id="content"> 11     <div class="box"> 12       <div class="box_img"> 13         <img src="Img/1.jpg"> 14       </div> 15     </div> 16     <div class="box"> 17       <div class="box_img"> 18         <img src="Img/2.jpg"> 19       </div> 20     </div> 21     <div class="box"> 22       <div class="box_img"> 23         <img src="Img/3.jpg"> 24       </div> 25     </div> 26     <div class="box"> 27       <div class="box_img"> 28         <img src="Img/4.jpg"> 29       </div> 30     </div> 31     <div class="box"> 32       <div class="box_img"> 33         <img src="Img/5.jpg"> 34       </div> 35     </div> 36     <div class="box"> 37       <div class="box_img"> 38         <img src="Img/6.jpg"> 39       </div> 40     </div> 41     <div class="box"> 42       <div class="box_img"> 43         <img src="Img/7.jpg"> 44       </div> 45     </div> 46     <div class="box"> 47       <div class="box_img"> 48         <img src="Img/8.jpg"> 49       </div> 50     </div> 51     <div class="box"> 52       <div class="box_img"> 53         <img src="Img/9.jpg"> 54       </div> 55     </div> 56     <div class="box" > 57       <div class="box_img"> 58         <img src="Img/10.jpg"> 59       </div> 60     </div> 61     <div class="box"> 62       <div class="box_img"> 63         <img src="Img/1.jpg"> 64       </div> 65     </div> 66     <div class="box"> 67       <div class="box_img"> 68         <img src="Img/2.jpg"> 69       </div> 70     </div> 71     <div class="box"> 72       <div class="box_img"> 73         <img src="Img/3.jpg"> 74       </div> 75     </div> 76     <div class="box"> 77       <div class="box_img"> 78         <img src="Img/4.jpg"> 79       </div> 80     </div> 81     <div class="box"> 82       <div class="box_img"> 83         <img src="Img/5.jpg"> 84       </div> 85     </div> 86     <div class="box"> 87       <div class="box_img"> 88         <img src="Img/6.jpg"> 89       </div> 90     </div> 91     <div class="box"> 92       <div class="box_img"> 93         <img src="Img/7.jpg"> 94       </div> 95     </div> 96     <div class="box"> 97       <div class="box_img"> 98         <img src="Img/8.jpg"> 99       </div>100     </div>101     <div class="box">102       <div class="box_img">103         <img src="Img/9.jpg">104       </div>105     </div>106     <div class="box" >107       <div class="box_img">108         <img src="Img/10.jpg">109       </div>110     </div>111     <div class="box">112       <div class="box_img">113         <img src="Img/1.jpg">114       </div>115     </div>116     <div class="box">117       <div class="box_img">118         <img src="Img/2.jpg">119       </div>120     </div>121     <div class="box">122       <div class="box_img">123         <img src="Img/3.jpg">124       </div>125     </div>126     <div class="box">127       <div class="box_img">128         <img src="Img/4.jpg">129       </div>130     </div>131     <div class="box">132       <div class="box_img">133         <img src="Img/5.jpg">134       </div>135     </div>136     <div class="box">137       <div class="box_img">138         <img src="Img/6.jpg">139       </div>140     </div>141     <div class="box">142       <div class="box_img">143         <img src="Img/7.jpg">144       </div>145     </div>146     <div class="box">147       <div class="box_img">148         <img src="Img/8.jpg">149       </div>150     </div>151     <div class="box">152       <div class="box_img">153         <img src="Img/9.jpg">154       </div>155     </div>156     <div class="box" >157       <div class="box_img">158         <img src="Img/10.jpg">159       </div>160     </div>161     <div class="box">162       <div class="box_img">163         <img src="Img/1.jpg">164       </div>165     </div>166     <div class="box">167       <div class="box_img">168         <img src="Img/2.jpg">169       </div>170     </div>171     <div class="box">172       <div class="box_img">173         <img src="Img/3.jpg">174       </div>175     </div>176     <div class="box">177       <div class="box_img">178         <img src="Img/4.jpg">179       </div>180     </div>181     <div class="box">182       <div class="box_img">183         <img src="Img/5.jpg">184       </div>185     </div>186     <div class="box">187       <div class="box_img">188         <img src="Img/6.jpg">189       </div>190     </div>191     <div class="box">192       <div class="box_img">193         <img src="Img/7.jpg">194       </div>195     </div>196     <div class="box">197       <div class="box_img">198         <img src="Img/8.jpg">199       </div>200     </div>201     <div class="box">202       <div class="box_img">203         <img src="Img/9.jpg">204       </div>205     </div>206     <div class="box" >207       <div class="box_img">208         <img src="Img/10.jpg">209       </div>210     </div>211     <div class="box">212       <div class="box_img">213         <img src="Img/1.jpg">214       </div>215     </div>216     <div class="box">217       <div class="box_img">218         <img src="Img/2.jpg">219       </div>220     </div>221     <div class="box">222       <div class="box_img">223         <img src="Img/3.jpg">224       </div>225     </div>226     <div class="box">227       <div class="box_img">228         <img src="Img/4.jpg">229       </div>230     </div>231     <div class="box">232       <div class="box_img">233         <img src="Img/5.jpg">234       </div>235     </div>236     <div class="box">237       <div class="box_img">238         <img src="Img/6.jpg">239       </div>240     </div>241     <div class="box">242       <div class="box_img">243         <img src="Img/7.jpg">244       </div>245     </div>246     <div class="box">247       <div class="box_img">248         <img src="Img/8.jpg">249       </div>250     </div>251     <div class="box">252       <div class="box_img">253         <img src="Img/9.jpg">254       </div>255     </div>256     <div class="box" >257       <div class="box_img">258         <img src="Img/10.jpg">259       </div>260     </div>261   </div>262 </body>263 </html>

View Code

  CSS文件:

 1 *{ 2   margin: 0; 3   padding:0; 4 } 5 #content{ 6   position: relative; 7   background-color: #006000; 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 img{20   width: 150px;21   height: auto;22 }

View Code

  js文件:

  Math.floor()函数能够向下取整。

  Math.min.apply(null,heightArr);函数能获得heightArr数组的最小值。

  window.onscroll=function(){};滑动页面的时候触发这个函数。

  document.documentElement.clientHeight;浏览器显示出来的高度。

  document.documentElement.scrollTop;滑动的距离。

/** * Created by asua on 2016/4/9. */window.onload=function(){  imgLocation("content","box");  var lodeImage={"Date":[{"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"},]}  window.onscroll=function(){    if(checkFlag()){      for(var i=0;i<lodeImage.Date.length;i++){        var box=document.createElement("div");        box.className="box";        var cparent=document.getElementById("content");        cparent.appendChild(box);        var box_img=document.createElement("div");        box_img.className="box_img";        box.appendChild(box_img);        var img=document.createElement("img");        img.src="Img/"+lodeImage.Date[i].src;        box_img.appendChild(img);      }      imgLocation("content","box");    }  }}function checkFlag(){  var cparent=document.getElementById("content");  var ccontent=getChildElement(cparent,"box");  var lastContentHeight=ccontent[ccontent.length-1].offsetTop;  var scrollHeight=document.documentElement.scrollTop||document.body.scrollTop;  var pageHeight=document.documentElement.clientHeight||document.body.clientHeight;  console.log(lastContentHeight+":"+scrollHeight+":"+pageHeight);  if(lastContentHeight<scrollHeight+pageHeight){    return true;  }}function imgLocation(parent,child){  var cparent=document.getElementById(parent);  var ccontent=getChildElement(cparent,child);  var imgwidth=ccontent[0].offsetWidth;  var cols=Math.floor(document.documentElement.clientWidth/imgwidth);  cparent.style.cssText="width:"+imgwidth*cols+"px;margin:30px auto";  var heightArr=[];  for(var i=0;i<ccontent.length;i++){    if(i<cols){      heightArr.push(ccontent[i].offsetHeight);    }else{      var minHeight=Math.min.apply(null,heightArr);      var minIndex=getMinIndex(heightArr,minHeight);      ccontent[i].style.position="absolute";      ccontent[i].style.top=minHeight+"px";      ccontent[i].style.left=ccontent[minIndex].offsetLeft+"px";      heightArr[minIndex]+=ccontent[i].offsetHeight;    }  }}function getMinIndex(heightArr,minHeight){  for(var i=0;i<heightArr.length;i++){    if(heightArr[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;}

View Code

  效果: