图片瀑布流布局

时间 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，图片随之开始加载。布局

学习完这个视频以后，我认为我还应该要熟悉的知识有：一、全部关于浏览器和其中元素的高度宽度距左距右距上距下的属性、学习