js圖片瀑布流

時間 2019-11-08

原文原文鏈接

一個簡單的圖片瀑布流css

首先準備一個html文件,css用到不多,因此寫在html裏,還須要一個js文件及幾張圖片(分辨率隨意)html

html的代碼:數組

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            margin: 0px;
            padding: 0px;
        }

        #container {
            position: relative;
        }

        .box_img {
            padding: 5px;
            float: left;
        }

        .box_img img {
            width: 300px;
            height: auto;
        }
    </style>
    <script src="js/test.js">
    </script>
</head>
<body>
<div id="container">
    <div class="box_img">
        <img src="1.jpg">
    </div>
    <div class="box_img">
        <img src="2.jpg">
    </div>
    <div class="box_img">
        <img src="3.jpg">
    </div>
    <div class="box_img">
        <img src="4.jpg">
    </div>
    <div class="box_img">
        <img src="5.jpg">
    </div>
    <div class="box_img">
        <img src="6.jpg">
    </div>
    <div class="box_img">
        <img src="7.jpg">
    </div>
    <div class="box_img">
        <img src="8.jpg">
    </div>
    <div class="box_img">
        <img src="9.jpg">
    </div>
    <div class="box_img">
        <img src="5.jpg">
    </div>
    <div class="box_img">
        <img src="6.jpg">
    </div>
    <div class="box_img">
        <img src="7.jpg">
    </div>
    <div class="box_img">
        <img src="8.jpg">
    </div>
    <div class="box_img">
        <img src="9.jpg">
    </div>
</div>
</body>

</html>

能夠看出id爲container的div包裹了許多class爲box_img的div,而這些div中都包含有一張圖片, 可是這樣僅僅是圖片的堆砌,每行圖片之間有很大的留白,這時加入js後便可以實現瀑布流的效果app

js的代碼:函數

 1 /**
 2  * Created by earthgee on 2015/4/3.
 3  */
 4 window.onload=function(){
 5     imgLocation("container","box_img");
 6 
 7     var imgData={"data":[{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"}]};
 8 
 9     window.onscroll= function () {
10          if(checkflag()){
11              //動態增長圖片,實現自動加載
12              var cparent=document.getElementById("container");
13              for(var i=0;i<imgData.data.length;i++)
14              {
15                  var ccontent=document.createElement("div");
16                  ccontent.className="box_img";
17                  cparent.appendChild(ccontent);
18                  var img=document.createElement("img");
19                  img.src=imgData.data[i].src;
20                  ccontent.appendChild(img);
21              }
22              imgLocation("container","box_img");
23          }
24     }
25 }
26 
27 //此函數實現自動加載,經過檢查當前頁面最後一張圖片距離頂端的距離,而後和頁面高度及滾動距離做比較
28 function checkflag()
29 {
30     var cparent=document.getElementById("container");
31     var cconent=getChildElement(cparent,"box_img");
32     var lastContentHeight=cconent[cconent.length-1].offsetTop;
33     var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
34     var pageHeight=document.documentElement.scrollTop||document.body.scrollTop;
35     if(lastContentHeight<scrollTop+pageHeight)
36     {
37         return true;
38     }
39 }
40 
41 //此函數實現瀑布流
42 function imgLocation(parent,content) {
43     var cparent=document.getElementById(parent);
44     var ccontent=getChildElement(cparent,content);   //ccontent爲數組
45     var imgWidth=ccontent[0].offsetWidth;       //得到第一張圖片的寬度(由於後面要在css中設置每張圖片的寬度相同)
46     var cols=Math.floor(document.documentElement.clientWidth/imgWidth); //一行放多少張圖片
47     cparent.style.cssText="width:"+imgWidth*cols+"px;margin:0 auto";
48 
49     var boxHeightArr=[];
50     for(var i=0;i<ccontent.length;i++)
51     {
52         if(i<cols)     //boxHeightArr存放第一行圖片的寬度
53         {
54             boxHeightArr[i]=ccontent[i].offsetHeight;
55 
56         }
57         else
58         {
59             var minheight=Math.min.apply(null,boxHeightArr);
60             var minIndex=getminheightLocation(boxHeightArr,minheight);    //找到第一行最短圖片的索引
61             ccontent[i].style.position="absolute";
62             ccontent[i].style.top=minheight+"px";
63             ccontent[i].style.left=ccontent[minIndex].offsetLeft+"px";
64             boxHeightArr[minIndex]=boxHeightArr[minIndex]+ccontent[i].offsetHeight;    //將每一張圖片放到當前能夠找到的最短圖片下面,並增長長度
65         }
66     }
67 }
68 
69 function getminheightLocation(boxHeightArr,minHeight) {
70     for(var i in boxHeightArr){
71         if(boxHeightArr[i]==minHeight){
72             return i;
73         }
74     }
75 }
76 
77 
78 //得到parent的全部class爲content的子元素,返回一個數組
79 function getChildElement(parent,content){
80     var contentArr=new Array();
81     var allcontent=parent.getElementsByTagName("*");  //匹配全部子元素
82     for(var i=0;i<allcontent.length;i++)
83     {
84         if(allcontent[i].className==content)
85         {
86             contentArr.push(allcontent[i]);
87         }
88     }
89     return contentArr;
90 }

此時就實現了圖片瀑布流的效果,能夠放在網站裏了...網站

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。