圖片瀑布流佈局

時間 2019-12-05

原文原文鏈接

HTML部分：css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流圖片</title>
    <script src="js.js"></script>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    div#container div.box{
        padding: 15px 0 0 15px;
        float:left;
    }
    div#container div.box div.box_images{
        padding: 10px;
        border:1px solid #ccc;
        box-shadow: 0 0 6px #ccc;
        border-radius: 5px;
    }
    div#container div.box div.box_images img{
        width:260px;
        height:auto;
    }
</style>
<body>
<div id="container">
    <div class="box">
        <div class="box_images">
            <img src="images/1.jpg" alt="#"/>
        </div>
    </div>
    <div class="box">
        <div class="box_images">
            <img src="images/2.jpg" alt="#"/>
        </div>
    </div>
    <div class="box">
        <div class="box_images">
            <img src="images/3.jpg" alt="#"/>
        </div>
    </div>
    <div class="box">
        <div class="box_images">
            <img src="images/4.jpg" alt="#"/>
        </div>
    </div>
    <div class="box">
        <div class="box_images">
            <img src="images/5.jpg" alt="#"/>
        </div>
    </div>
    <div class="box">
        <div class="box_images">
            <img src="images/6.jpg" alt="#"/>
        </div>
    </div>
    <div class="box">
        <div class="box_images">
            <img src="images/7.jpg" alt="#"/>
        </div>
    </div>
    <div class="box">
        <div class="box_images">
            <img src="images/8.jpg" alt="#"/>
        </div>
    </div>
    <div class="box">
        <div class="box_images">
            <img src="images/9.jpg" alt="#"/>
        </div>
    </div>
    <div class="box">
        <div class="box_images">
            <img src="images/1.jpg" alt="#"/>
        </div>
    </div>
    <div class="box">
        <div class="box_images">
            <img src="images/2.jpg" alt="#"/>
        </div>
    </div>
    <div class="box">
        <div class="box_images">
            <img src="images/3.jpg" alt="#"/>
        </div>
    </div>
    <div class="box">
        <div class="box_images">
            <img src="images/4.jpg" alt="#"/>
        </div>
    </div>
    <div class="box">
        <div class="box_images">
            <img src="images/5.jpg" alt="#"/>
        </div>
    </div>
    <div class="box">
        <div class="box_images">
            <img src="images/6.jpg" alt="#"/>
        </div>
    </div>
    <div class="box">
        <div class="box_images">
            <img src="images/7.jpg" alt="#"/>
        </div>
    </div>
    <div class="box">
        <div class="box_images">
            <img src="images/8.jpg" alt="#"/>
        </div>
    </div>
    <div class="box">
        <div class="box_images">
            <img src="images/9.jpg" alt="#"/>
        </div>
    </div>
    <div class="box">
        <div class="box_images">
            <img src="images/1.jpg" alt="#"/>
        </div>
    </div>
    <div class="box">
        <div class="box_images">
            <img src="images/2.jpg" alt="#"/>
        </div>
    </div>
    <div class="box">
        <div class="box_images">
            <img src="images/3.jpg" alt="#"/>
        </div>
    </div>
    <div class="box">
        <div class="box_images">
            <img src="images/4.jpg" alt="#"/>
        </div>
    </div>
    <div class="box">
        <div class="box_images">
            <img src="images/5.jpg" alt="#"/>
        </div>
    </div>
    <div class="box">
        <div class="box_images">
            <img src="images/6.jpg" alt="#"/>
        </div>
    </div>
    <div class="box">
        <div class="box_images">
            <img src="images/7.jpg" alt="#"/>
        </div>
    </div>
    <div class="box">
        <div class="box_images">
            <img src="images/8.jpg" alt="#"/>
        </div>
    </div>
    <div class="box">
        <div class="box_images">
            <img src="images/9.jpg" alt="#"/>
        </div>
    </div>
    <div class="box">
        <div class="box_images">
            <img src="images/1.jpg" alt="#"/>
        </div>
    </div>
    <div class="box">
        <div class="box_images">
            <img src="images/2.jpg" alt="#"/>
        </div>
    </div>
    <div class="box">
        <div class="box_images">
            <img src="images/3.jpg" alt="#"/>
        </div>
    </div>
    <div class="box">
        <div class="box_images">
            <img src="images/4.jpg" alt="#"/>
        </div>
    </div>
    <div class="box">
        <div class="box_images">
            <img src="images/5.jpg" alt="#"/>
        </div>
    </div>
    <div class="box">
        <div class="box_images">
            <img src="images/6.jpg" alt="#"/>
        </div>
    </div>
    <div class="box">
        <div class="box_images">
            <img src="images/7.jpg" alt="#"/>
        </div>
    </div>
    <div class="box">
        <div class="box_images">
            <img src="images/8.jpg" alt="#"/>
        </div>
    </div>
    <div class="box">
        <div class="box_images">
            <img src="images/9.jpg" alt="#"/>
        </div>
    </div>
</div>
</body>
</html>

JS部分：html

/**
 * Created by Administrator on 2016/2/5.
 */
//首先取得圖片的寬度，而後取得打開瀏覽器時屏幕的寬度，相除獲得一行圖片的數量，就能夠獲得每行的固定寬度。
//而後得到第一行圖片的高度，獲取高度最小的圖片，把一張圖片放在它的下方，以此類推
//最後，設置當瀏覽器滑到最後一張圖片的頂端是，自動加載更多的圖片
window.onload=function(){
    setWidth("container","box");
    var imgDate={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"}]};//定義一個對象用來存放圖像
    window.onscroll=function(){
        if(checkFlag()){//滑到窗口最後一張圖片，開始加載
            var cparent=document.getElementById("container");
            for(var i=0;i<imgDate.date.length;i++){
                var ccontent=document.createElement("div");
                ccontent.className="box";
                cparent.appendChild(ccontent);
                var cimagebox=document.createElement("div");
                cimagebox.className="box_images";
                ccontent.appendChild(cimagebox);
                var cimage=document.createElement("img");
                cimage.src="images/"+imgDate.date[i].src;
                cimagebox.appendChild(cimage);
            }
            setWidth("container","box");//最後調用以前的方法來使新增長的圖片也是瀑布流佈局
        }
    }
};
    ///定義一個方法，用來檢測瀏覽器是否滑到窗口的最後一張圖片中
    function checkFlag(){
        var cparent=document.getElementById("container");
        var cchild=getElements(cparent,"box");
        var lastChildHeight=cchild[cchild.length-1].offsetTop;//得到最後一張圖片距離頂端的高度
        var windowHeight=document.documentElement.clientHeight || document.body.clientHeight;//得到瀏覽器內容的高度
        var scrollHeight=document.documentElement.scrollTop || document.body.scrollTop;//得到滑動的高度
        if(lastChildHeight<windowHeight+scrollHeight){
            return true;//若是瀏覽器內容的高度加上滑動的高度大於最後一張圖片距離頂端的蓋度，則返回true
        }//else{
        //    return false;
        //}

    }
    //定義一個方法，用於取得一個元素中的須要的元素
    function getElements(parent,childClass){
        var cparent=parent.getElementsByTagName("*");
        var contentArr=[];
        for(var i=0;i<cparent.length;i++){
            if(cparent[i].className==childClass){
            contentArr.push(cparent[i]);//push() 方法可向數組的末尾添加一個或多個元素，並返回新的長度。
            }
        }
        return contentArr;
    }

    //設置頁面的寬度，而且設置第二列以後的圖片怎麼放置
    function setWidth(parent,childClass){
        var cparent=document.getElementById(parent);
        var boxArr=getElements(cparent,childClass);
        var imgWidth=boxArr[0].offsetWidth;//返回元素的可視寬度
        var cols=Math.floor(document.documentElement.clientWidth /imgWidth);
        var width=imgWidth*cols;
        cparent.style.cssText="width:"+width+"px"+";margin:0 auto;";
        //這裏開始排列第二列以後的圖片，主要原理是用一個數組把全部圖片的高度都放進去，而後一張張的放在第一列最小高度圖片的下方，重點是放完以後要改變那一列的寬度，使下一張圖片放在下方
        var imagesHeight=[];
        for(var i=0;i<boxArr.length;i++){
            if(i<cols){
                imagesHeight[i]=boxArr[i].offsetHeight;
            }else{
                var minHeight= Math.min.apply(null,imagesHeight);
                //console.log(minHeight);
                var minHeightindex=getMinHeightImages(imagesHeight,minHeight);
                //console.log(minHeightindex);
                boxArr[i].style.position="absolute";//改變這個圖片的位置，使在它最小高度的下方
                boxArr[i].style.top=minHeight+"px";
                boxArr[i].style.left=boxArr[minHeightindex].offsetLeft+"px";
                imagesHeight[minHeightindex]=imagesHeight[minHeightindex]+boxArr[i].offsetHeight;//這裏很重要，改變圖像高度數組裏面最小高度值，使下一張圖片排列在其餘地方
            }
        }
    }
    //設置一個函數用於獲得高度數組中的最小高度是哪一張
    function getMinHeightImages(arr,minHeight){
        for(var i=0;i<arr.length;i++){
            if(arr[i]==minHeight){
                return i;
            }
        }
    }

此次的實踐是作一個瀑布流佈局的圖片界面，這種應用能夠在百度圖片看到。也就不少圖片排列在一個頁面，這些圖片都擁有相同的寬度。雖然寬度相同，可是高度可能就不相同了，由於圖片是視同浮動排列的，因此從第二排開始，圖片的排列就變得很是凌亂。而此次實踐就是將第二排的圖片一張一張的放在第一排圖片高度最小的那張圖片下面，以此類推。數組

要完成此次實踐，主要有三個步驟，回顧一下：瀏覽器

一、首先得到全部圖片的元素，而後利用offsetWidth屬性獲得圖片的可視寬度。以後得到瀏覽器屏幕的寬度，求出一排能夠放多少張圖片，再相乘，或者一行的寬度而且設置。app

二、要設置第二排以後圖片的擺放。首先把全部圖片利用offsetHeight屬性獲得高度，把他們所有放在一個數組裏面。而後求出最小值，把第二排的第一張圖片利用定位的方法放在下面，以此類推。函數

三、其實完成第二步以後瀑布流佈局就已經出現了，可是仍是要完成自動加載的步驟。首先把圖片放在一個對象中存放。自動加載其實就是當瀏覽器滑動到最後一張圖片後開始加載，全部要建立一個對瀏覽器滑動的判斷，若是判斷到最後一個圖片，則返回true，圖片隨之開始加載。佈局

學習完這個視頻以後，我認爲我還應該要熟悉的知識有：一、全部關於瀏覽器和其中元素的高度寬度距左距右距上距下的屬性、學習