瀑布流布局

83 阅读 0 评论 55 点赞

我是靠谱客的博主无情芝麻，最近开发中收集的这篇文章主要介绍瀑布流布局，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

瀑布流布局

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #main{
            margin: 15px auto;
            position: relative;
        }
        .box{
            padding: 15px 0 0 15px;
            float: left;
        }
        .pic{
            padding: 15px;
            border: 1px solid #ccc;
            box-shadow: 0 0 5px #ccc;
            border-radius: 5%;
        }
        .box .pic img{
            width: 168px;
        }
    </style>
    <title>瀑布流-页面布局结构</title>
</head>
<body>
    <div id="main">
        <div class="box">
            <div class="pic"><img src="img/pubuliu/1.jpg" ></div>
        </div>
        <div class="box">
            <div class="pic"><img src="img/pubuliu/2.jpg" ></div>
        </div>
        <div class="box">
            <div class="pic"><img src="img/pubuliu/3.jpg" ></div>
        </div>
        <div class="box">
            <div class="pic"><img src="img/pubuliu/4.jpg" ></div>
        </div>
        <div class="box">
            <div class="pic"><img src="img/pubuliu/5.jpg" ></div>
        </div>
        <div class="box">
            <div class="pic"><img src="img/pubuliu/6.jpg" ></div>
        </div>
        <div class="box">
            <div class="pic"><img src="img/pubuliu/7.jpg" ></div>
        </div>
        <div class="box">
            <div class="pic"><img src="img/pubuliu/8.jpg" ></div>
        </div>
        <div class="box">
            <div class="pic"><img src="img/pubuliu/9.jpg" ></div>
        </div>
        <div class="box">
            <div class="pic"><img src="img/pubuliu/10.jpg" ></div>
        </div>
        <div class="box">
            <div class="pic"><img src="img/pubuliu/11.jpg" ></div>
        </div>
        <div class="box">
            <div class="pic"><img src="img/pubuliu/12.jpg" ></div>
        </div>
        <div class="box">
            <div class="pic"><img src="img/pubuliu/13.jpg" ></div>
        </div>
        <div class="box">
            <div class="pic"><img src="img/pubuliu/14.jpg" ></div>
        </div>
        <div class="box">
            <div class="pic"><img src="img/pubuliu/15.jpg" ></div>
        </div>
        <div class="box">
            <div class="pic"><img src="img/pubuliu/16.jpg" ></div>
        </div>
        <div class="box">
            <div class="pic"><img src="img/pubuliu/17.jpg" ></div>
        </div>
        <div class="box">
            <div class="pic"><img src="img/pubuliu/18.jpg" ></div>
        </div>
        <div class="box">
            <div class="pic"><img src="img/pubuliu/19.jpg" ></div>
        </div>
        <div class="box">
            <div class="pic"><img src="img/pubuliu/20.jpg" ></div>
        </div>
    </div>
</body>
<script type="text/javascript">
    //写入waterfall函数，为了两次调用 1刷新页面加载一次 2拖动滚动条的时候加载一次
    //拖动滚动条的时候重新加载图片
    window.onload=function(){
        waterfall("main","box");
        window.onscroll=function(){    //滚动条在滚动时开始加载图片
            
        }
        }
    function waterfall(parent,box){
        var oParent=document.getElementById(parent) //获取#main
        var oBox=getClass(box) //获取box
        // main的宽：页面可视区域/单个图片的宽，用单个图片的宽*总个数
        var width=document.documentElement.clientWidth || document.body.clientWidth //可视区域的宽
        var oBoxWidth=oBox[0].offsetWidth    //获取图片的宽度
        var num = Math.floor(width/oBoxWidth)     //可视区域可以放多少个图片(去掉小数点后的数)
        oParent.style.width=num*oBoxWidth+'px'    //main的宽度
        // 下标*图片宽度=left   上面图片的高度=top    每下一排的第一个放到上一排空最大的地方，以此类推
        var hrr=[];    //存储图片的高度
        for(var i=0;i<oBox.length;i++){
            if(i<num){    //如果没有超出一行的个数
                hrr.push(oBox[i].offsetHeight)
            }else{
                // hrr数组中最小值的下标位置
                var min=Math.min.apply(null,hrr) //hrr里面的最小值
                // console.log(min)
                var index=inArray(hrr,min)
                // console.log(index)
                // console.log(index*oBoxWidth)
                oBox[i].style.position="absolute"
                oBox[i].style.left=index*oBoxWidth+'px'
                oBox[i].style.top=min+'px'
                hrr[index]=hrr[index] + oBox[i].offsetHeight
            }
        }
        function inArray(hrr,min){    ///循环hrr里的每一个值，如果某个和最小值min相等，返回i下标
            for(var i=0;i<hrr.length;i++){
                if(hrr[i]==min){
                    return i
                }
            }
        }
    }
    function getClass(box){    //获取class名称节点的函数
        // 1 把页面上所有的节点获取到
        // 2 循环遍历所有节点，进行条件判断
        // 3 符合要求的节点放入到数组中
        var doms=document.getElementsByTagName('*')
        var reg=new RegExp("\b"+box+"\b")
        var arr=[]
        for(var i=0;i<doms.length;i++){
            if(reg.test(doms[i].className)){
                arr.push(doms[i])
            }
        }
        return arr
    }
</script>
</html>