带你来写瀑布流布局

前言：什么是瀑布流布局？

比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。

例如：找网上找了一张比较漂亮的瀑布流布局的图片

下面我们就来实现一下布局

1.纯css实现瀑布流

前提：图片的宽度固定，高度不固定。

<!DOCTYPE HTML>

<html>

<head>

<style>

.container {

-webkit-column- 200px;

-moz-column- 200px;

-o-colum- 200px;

-webkit-column-gap: 1px;

-moz-column-gap: 1px;

-o-column-gap: 1px;

}

div:not(.container) {

display: inline-block;

200px;

position: relative;

margin: 2px;

}

</style>

</head>

<body>

<div >

</div>

<div >

</div>

<div >

</div>

<div >

</div>

<div >

</div>

<div >

</div>

<div >

</div>

<div >

</div>

<div >

</div>

<div >

</div>

<div >

</div>

<div >

</div>

</section>

</body>

</html>

效果：

2.利用column实现

<!DOCTYPE html>
<html>

<head>
    <style>
        .box {
            margin: 10px;
            column-count: 3; // 每行显示的几个
            column-gap: 10px;
        }

        .box div {
            margin-bottom: 10px;
        }

    </style>
</head>

<body>

<div >

</div>

<div >

</div>

<div >

</div>

<div >

</div>

<div >

</div>

<div >

</div>

<div >

</div>

<div >

</div>

<div >

</div>

<div >

</div>

<div >

</div>

<div >

</div>

</body>

效果：

css实现瀑布流布局不止这两种方法，也可以利用flex布局，我这边就不写了。

3.利用js实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>瀑布流</title>
    <style type="text/css">
        *{margin: 0; padding: 0;}
        #main{
            margin :0 auto;
            position: relative;
        }
        .box{
            float: left;
            padding: 15px 0 0 15px;
        }
        .pic{
            padding: 10px;
            border:1px solid #ccc;
            box-shadow: 0 0 5px #ccc;
        }
        .box .pic{
             200px;
        }
    </style>
</head>
<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

    <script type="text/javascript">
        window.onload = function(){
            waterfall('main','box');
        }
 
        function waterfall(parent,box){
            //获取main元素
            var oparent = document.getElementById(parent);
 
            //获取所有 box 元素
            var obox = getClass('box');
 
            //获取每行能放多少个 居中摆放
            var w = document.body.clientWidth||document.documentElement.clientWidth;
            //var w =1000;
            var oneWidth = obox[0].offsetWidth;
            var num = Math.floor(w/oneWidth);
            main.style.width = num*oneWidth+'px';
 
            //瀑布流原理  left-下标*图片width top-上面图片高
            var hrr = [];
            for(var i=0;i<obox.length;i++){
                if(i<num){
                    hrr.push(obox[i].offsetHeight);
                }else{
                    var min = Math.min.apply(null,hrr);
                    var index = getindex(hrr,min);
                    obox[i].style.position = 'absolute';
                    obox[i].style.left = index*oneWidth+'px';
                    obox[i].style.top = min+'px';
                    hrr[index] += obox[i].offsetHeight;
                }
            }
            console.log(hrr);
        }
 
        //获取 数组内指定值的 序号
        function getindex(hrr,h){
            for(var i=0;i<hrr.length;i++){
                if(hrr[i]==h){
                    return i;
                }
            }
        }
 
        //统计所有指定class名称的元素
        function getClass(a){
            var doms = document.getElementsByTagName('*');
            var reg = new RegExp('\b'+a+'\b');
            var arr = [];
            for(var i=0;i<doms.length;i++){
                if(reg.test(doms[i].className)){
                    arr.push(doms[i]);
                }
            }
            return arr;
        }
 
    </script>

效果：

4.利用jquery实现

其实juery和javascript实现差不多，但是比js简便多了，我这边就不写了。

结：

多一点学习多一点分享...