js圖片瀑布流效果

時間  2019-11-17
標籤 圖片 瀑布 效果 欄目 JavaScript 简体版
原文   原文鏈接

要實現圖片瀑布流效果，首先得準備幾張圖片。css

html的部分比較簡單就是將圖片加載到瀏覽器就能夠了html

代碼以下（注意放的圖片多一點要否則以後沒法滑動鼠標就沒法達到瀑布流效果）：數組

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pool</title>
    <link rel="stylesheet" type="text/css" href="style2.css">
    <script src="js/app.js"></script>
</head>
<body>
    <div id="container">
        <div class="box">
            <div class="box_img">
                <img src="1.jpeg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="8.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="3.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="4.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="5.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="6.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="7.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="2.jpeg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="9.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="10.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="10.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="9.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="10.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="1.jpeg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="2.jpeg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="4.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="6.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="3.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="9.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="2.jpeg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="6.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="3.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="9.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="2.jpeg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="6.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="3.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="9.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="2.jpeg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="6.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="3.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="9.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="2.jpeg">
            </div>
        </div>
    </div>

</body>
</html>

style2.css代碼以下：瀏覽器

*{
margin: 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: 150px;
    height: auto;
}

 

app.js代碼以下（靈魂）：app

 

window.onload = function (){
imgLocation("container","box");
    //準備的照片
    var imgData = {"data":[{"src":"10.jpg"},{"src":"9.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"7.jpg"}]};
    window.onscroll=function(){
        //鼠標滑輪一滑就加載圖片實際上就是將圖片添加到html中
        //就是添加下面東西到html中，src變化
        /*<div class="box">
            <div class="box_img">
            <img src="8.jpg">
            </div>
            </div>
          */
        if(checkOut()){
            //由於html是樹結構的
            var cparent=document.getElementById("container");
            
            for(var i=0;i<imgData.data.length;i++){
                //分別建立2個div和一個img
                var boxDiv = document.createElement("div");
                var boxImgDiv = document.createElement("div");
                var Img = document.createElement("img");
                
                //給建立的節點添加與以前再html直接寫出的圖片區域同樣的屬性    
                boxDiv.className = "box";
                boxImgDiv.className = "box_img";
                Img.src = imgData.data[i].src;
                
                //肯定添加節點的位置（你建立的節點的父母是誰）
                cparent.appendChild(boxDiv);
                boxDiv.appendChild(boxImgDiv);
                boxImgDiv.appendChild(Img);


            }
            //按照以前的照片排列規則
            imgLocation("container","box");
        }
    }
}

function checkOut() {

    var ccontent=[];
    var cparent=document.getElementById("container");
    ccontent=getChildElement(cparent,"box");
    var lastTopheight= ccontent[ccontent.length-1].offsetTop;//最後一張照片距離最上面的高度（大於液麪高度）
    var scrollTop = document.documentElement.scrollTop;//滾輪滑動的長度
    var pageHeight = document.documentElement.clientHeight||document.body.clientHeight;//頁面高度
    //console.log(lastTopheight+":"+scrollTop+":"+pageHeight);
    //當滑到最後一張圖片準備開始加載準備的圖片
    //斷定條件就是頁面高度加上鼠標滑輪滑動大於最後一張圖片距離最上面的高度（等於就是剛準備刷到最後一張照片）
    if(pageHeight+scrollTop>lastTopheight){
        return true;
    }
}

function imgLocation(parent,content){
    var cparent=document.getElementById(parent);//先得到的container節點
    var ccontent=getChildElement(cparent,content);
    //console.log(ccontent);
    var imgWidth=ccontent[0].offsetWidth;
    var WindowWidth=document.documentElement.clientWidth;
    var num=Math.floor(WindowWidth/imgWidth);//瀏覽器一橫行所放圖片的數量
    cparent.style.cssText = "width:"+Math.floor(num*imgWidth)+"px;margin:0 auto";
    // console.log(num);
    // console.log(ccontent.length);
    var boxHeightArr=[];


    for(var i=0;i<ccontent.length;i++){
        if(i<num){
        boxHeightArr[i]=ccontent[i].offsetHeight;
        //console.log(boxHeightArr[i]);
        }else{
            var minHeight= Math.min.apply(null,boxHeightArr);//找到數組最小的高度
            // console.log(minHeight);
            var minindex=getminHeightLocation(boxHeightArr,minHeight);//得到最小高度圖片的下標
            //設置佈局是絕對的
            ccontent[i].style.position="absolute";
            
            //將下一行的照片放在最小的下方由於長度相同
            ccontent[i].style.top=minHeight+"px";
            ccontent[i].style.left=ccontent[minindex].offsetLeft+"px";
           
            //將最小的值變爲最小的加上它下面的高度（目的：這樣下個最小就是第二小）
            boxHeightArr[minindex]=boxHeightArr[minindex]+ccontent[i].offsetHeight;
        }
    }
}

function getChildElement(parent,content) {
    var allContent=[];
    allContent=parent.childNodes;//parent.getElementsByTagName("*");(註釋掉的是視頻中講的)
    var contentArr = new Array();
    for(var i=0;i<allContent.length;i++){
        if(allContent[i].className==content){
            contentArr.push(allContent[i]);
        }
    }
    return contentArr;
}

function getminHeightLocation(boxHeightArr,minHeight){
    for(var i=0;i<boxHeightArr.length;i++){
        if(boxHeightArr[i]==minHeight){
            return i;
        }
    }
}

 

 

效果展現（滑輪向下滑永遠滑不到盡頭）：佈局

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程