瀑布流布局

  • 写法一：
<!DOCTYPE html>
<html lang="en">
<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">
    <title>瀑布流原始写法</title>
    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
    <style>
        .content {
            position: relative;
        }

        .item {
            position: absolute;
            width: 200px;
            margin-right: 10px;
            margin-top: 10px;
            transition: all 1s;
        }

        .h1 {
            height: 200px;
            background-color: #f4b300;
        }

        .h2 {
            height: 300px;
            background-color:  #691BB8;
        }

        .h3 {
            height: 400px;
            background-color:  #006ac1;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="item h1">1</div>
        <div class="item h3">2</div>
        <div class="item h2">3</div>
        <div class="item h1">4</div>
        <div class="item h1">5</div>
        <div class="item h3">6</div>
        <div class="item h3">7</div>
        <div class="item h2">8</div>
        <div class="item h1">9</div>
        <div class="item h3">10</div>
        <div class="item h3">11</div>
        <div class="item h2">12</div>
        <div class="item h2">13</div>
        <div class="item h2">14</div>
    </div>

    <script>
        function render(){

            var nodeWidth = $('.item').outerWidth(true),  //节点的宽度。.outerWidth(true)包含外边距和边框的宽度
                colNum = parseInt($(window).width() / nodeWidth),  //计算当前有几列。parseInt()方法取整数
                colSumHeight = [];  //定义一个空数组，用于计算列的高度之和

            for(var i=0; i<colNum; i++){
                colSumHeight.push(0);  //定义初始高度0。.push()在数组的末尾添加数值0
            }

            $('.item').each(function(){
                var $cur = $(this);

                //colSumHeight = [100, 250, 80, 200] 假设目前一行元素的高度

                //声明下标第0位,声明minSumHeight的最小高度是0
                var idx = 0,
                    minSumHeight = colSumHeight[0];

                for(var i=0; i<colSumHeight.length; i++){
                    //用于替换下标和最小高度
                    if(colSumHeight[i] < minSumHeight){
                    var idx = i,
                        minSumHeight = colSumHeight[i];
                    }
                }
                //调整替换过的.item的位置
                $cur.css({
                    left: nodeWidth*idx,
                    top: minSumHeight
                });
                //叠加后的高度=当前元素的高度+相加前的高度
                colSumHeight[idx] = $cur.outerHeight(true) + colSumHeight[idx];
            });    
        }

        render();

        $(window).on('resize', function(){
            render();
        });
    </script>
</body>
</html>
  • 写法二：
<!DOCTYPE html>
<html lang="en">

<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">
    <title>瀑布流封装写法一</title>
    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
    <style>
        .content {
            position: relative;
        }

        .item {
            position: absolute;
            width: 200px;
            margin-right: 10px;
            margin-top: 10px;
            transition: all 1s;
        }

        .h1 {
            height: 200px;
            background-color: #f4b300;
        }

        .h2 {
            height: 300px;
            background-color: #691BB8;
        }

        .h3 {
            height: 400px;
            background-color: #006ac1;
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="item h1">1</div>
        <div class="item h3">2</div>
        <div class="item h2">3</div>
        <div class="item h1">4</div>
        <div class="item h1">5</div>
        <div class="item h3">6</div>
        <div class="item h3">7</div>
        <div class="item h2">8</div>
        <div class="item h1">9</div>
        <div class="item h3">10</div>
        <div class="item h3">11</div>
        <div class="item h2">12</div>
        <div class="item h2">13</div>
        <div class="item h2">14</div>
    </div>

    <script>
        var water = (function () {

            function render() {

                var nodeWidth = $('.item').outerWidth(true),  //节点的宽度。.outerWidth(true)包含外边距和边框的宽度
                    colNum = parseInt($(window).width() / nodeWidth),  //计算当前有几列。parseInt()方法取整数
                    colSumHeight = [];  //定义一个空数组，用于计算列的高度之和

                for (var i = 0; i < colNum; i++) {
                    colSumHeight.push(0);  //定义初始高度0（即第一列每个元素的初始高度都是0）。.push()在数组的末尾添加数值0
                }

                $('.item').each(function () {
                    var $cur = $(this);

                    //colSumHeight = [100, 250, 80, 200] 假设目前一行元素的高度

                    //声明下标第0位,声明minSumHeight的最小高度是0
                    var idx = 0,
                        minSumHeight = colSumHeight[0];

                    for (var i = 0; i < colSumHeight.length; i++) {
                        //用于替换下标和最小高度
                        if (colSumHeight[i] < minSumHeight) {
                            var idx = i,
                                minSumHeight = colSumHeight[i];
                        }
                    }
                    //调整替换过的.item的位置
                    $cur.css({
                        left: nodeWidth * idx,
                        top: minSumHeight
                    });
                    //叠加后的高度=当前元素的高度+相加前的高度
                    colSumHeight[idx] = $cur.outerHeight(true) + colSumHeight[idx];
                });
            }

            render();

            $(window).on('resize', function () {
                render();
            });

            /*render函数放在了要return出去的对象water的init属性里(retrun出一个接口)
            water.init = water[init] = render
            如果直接写成init: render(),那init就是render函数执行之后的结果
            render函数执行的返回值是undefined，所以init: undefined*/
            return {
                init: render
            }
        })();
        console.log(water);
        water.init();
    </script>
</body>

</html>
  • 写法三：
<!DOCTYPE html>
<html lang="en">
<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">
    <title>瀑布流封装写法二</title>
    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
    <style>
        .content {
            position: relative;
        }

        .item {
            position: absolute;
            width: 200px;
            margin-right: 10px;
            margin-top: 10px;
            transition: all 1s;
        }

        .h1 {
            height: 200px;
            background-color: #f4b300;
        }

        .h2 {
            height: 300px;
            background-color:  #691BB8;
        }

        .h3 {
            height: 400px;
            background-color:  #006ac1;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="item h1">1</div>
        <div class="item h3">2</div>
        <div class="item h2">3</div>
        <div class="item h1">4</div>
        <div class="item h1">5</div>
        <div class="item h3">6</div>
        <div class="item h3">7</div>
        <div class="item h2">8</div>
        <div class="item h1">9</div>
        <div class="item h3">10</div>
        <div class="item h3">11</div>
        <div class="item h2">12</div>
        <div class="item h2">13</div>
        <div class="item h2">14</div>
    </div>

    <script>
        //定义一个对象
        var WaterFall = {

            //高度[0, 0, 0, 0]
            //高度[20, 10, 30, 15]

            arrColHeight: [],

            init: function($ct){
                this.$ct = $ct;
            }
        }

        //调用时传入根节点
        WaterFall.init($('.content'));
    </script>
</body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容