js实现瀑布流

js实现瀑布流

html


  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <link href="css/style.css" rel="stylesheet">
  6.     <title>瀑布流</title>
  7. </head>
  8. <body>
  9. <div id="container">
  12.     <div class="box">
  13.         <div class="box_img">
  14.             <img src="images/1.jpg">
  15.         </div>
  16.     </div>
  17.     <div class="box">
  18.         <div class="box_img">
  19.             <img src="images/2.jpg">
  20.         </div>
  21.     </div>
  22.     <div class="box">
  23.         <div class="box_img">
  24.             <img src="images/3.jpg">
  25.         </div>
  26.     </div>
  27.     <div class="box">
  28.         <div class="box_img">
  29.             <img src="images/4.jpg">
  30.         </div>
  31.     </div>
  32.     <div class="box">
  33.         <div class="box_img">
  34.             <img src="images/5.jpg">
  35.         </div>
  36.     </div>
  37.     <div class="box">
  38.         <div class="box_img">
  39.             <img src="images/6.jpg">
  40.         </div>
  41.     </div>
  42.     <div class="box">
  43.         <div class="box_img">
  44.             <img src="images/7.jpg">
  45.         </div>
  46.     </div>
  47.     <div class="box">
  48.         <div class="box_img">
  49.             <img src="images/8.jpg">
  50.         </div>
  51.     </div>
  52.     <div class="box">
  53.         <div class="box_img">
  54.             <img src="images/9.jpg">
  55.         </div>
  56.     </div>
  57.     <div class="box">
  58.         <div class="box_img">
  59.             <img src="images/10.jpg">
  60.         </div>
  61.     </div>
  62.     <div class="box">
  63.         <div class="box_img">
  64.             <img src="images/11.jpg">
  65.         </div>
  66.     </div>
  67. </div>
  68. <script src="js/jswrapller.js"></script>
  69. </body>
  70. </html>

jswrapller.js


  1. /**
  2.  * Created by davidtall on 14/12/16.
  3.  */
  5. window.onload = function () {
  6.     imgLocation("container", "box");
  7.     var imgData={"data":[{"src":"11.jpg"},{"src":"12.jpg"},{"src":"13.jpg"},{"src":"14.jpg"},{"src":"15.jpg"}
  8.         ,{"src":"16.jpg"},{"src":"17.jpg"},{"src":"18.jpg"},{"src":"19.jpg"}]};
  11.     var container = document.getElementById("container");
  12.     window.onscroll = function () {
  13.         if (checkFlag()) {
  14.             for(var i=0;i<imgData.data.length;i++){
  15.                 console.log(i);
  16.                 var box =document.createElement("div");
  17.                 box.className="box";
  18.                 container.appendChild(box);
  19.                 var box_img =document.createElement("div");
  20.                 box_img.className="box_img";
  21.                 box.appendChild(box_img);
  22.                 var img= document.createElement("img");
  23.                 img.src="images/"+imgData.data[i].src;
  24.                 box_img.appendChild(img);
  25.             }
  26.         }
  27.         imgLocation("container","box");
  28.     }
  29. }
  30. function checkFlag() {
  31.     var container = document.getElementById("container");
  32.     var boxs = document.getElementsByClassName("box");
  33.     var lastContentHeight = boxs[boxs.length - 1].offsetTop;
  34.     var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  35.     var pageHeight = document.documentElement.clientHeight || document.body.clientHeight;
  36.    // console.log(lastContentHeight + ":" + scrollTop + ":" + pageHeight);
  37.     return scrollTop + pageHeight > lastContentHeight;
  39. }
  41. function imgLocation(parent, content) {
  42.     var container = document.getElementById("container");
  43.     var boxs = document.getElementsByClassName("box");
  44.     var imgWidth = boxs[0].offsetWidth;
  46.     //console.log(imgWidth);
  47.     var num = Math.floor(document.documentElement.clientWidth / imgWidth);
  48.     var container = document.getElementById(parent);
  49.     container.style.cssText = "width:" + imgWidth * num + "px; margin: 0 auto;";
  51.     var boxsHeightArr=[];
  52.     for(var i=0;i<boxs.length;i++){
  53.         if(i<num){
  54.             boxsHeightArr[i]=boxs[i].offsetHeight;
  55.         }else{//第二行开始使用绝对布局对图片进行定位
  56.             var minHeight=Math.min.apply(null,boxsHeightArr);
  57.             var minIndex=getminHeightIndex(boxsHeightArr,minHeight);
  58.             boxs[i].style.position="absolute";
  59.             boxs[i].style.top=minHeight+"px";
  60.             boxs[i].style.left=boxs[minIndex].offsetLeft+"px";
  61.             boxsHeightArr[minIndex]= boxsHeightArr[minIndex]+boxs[i].offsetHeight;
  63.         }
  64.     }
  66. }
  67. //取得最低高度的img的索引值
  68. function getminHeightIndex(boxsHeightArr,minHeight){
  69.     for( var i in boxsHeightArr){
  70.         if(boxsHeightArr[i]== minHeight)
  71.         return i;
  72.     }
  73. }






posted @ 2014-12-28 19:09  davidtall  阅读(122)  评论(0)  编辑  收藏  举报