瀑布流布局实践-优快云博客

上家公司的时候，公司要求做个“瀑布流”，说这个主流，这是方向。然后就吭吭吭就去做了

百度了下，实现“瀑布流”的方式，主要是两种，一种是固定行数，然后每行独立去增加；另一种是根据上一行最短的那个的高度去算第二行第一个出现的位置；

当时直接用了taobao的KissY前端组件，实现很简单，如下：

Js部分

$(function () {

            KISSY.use("waterfall", function (S, Waterfall) {
                new Waterfall({
                    container: "#container",    //节点容器
                    minColCount: 2,             //最小列数
                    colWidth: 290               //每列的宽度
                });
            });
        })

页面部分

 <div id='container' style="position: relative;">
        
    </div>

今年的前段时间，看了<慕客网>的视频，摘下了如下代码，感觉不错。

<html>
<head>
    <meta charset="utf-8">
    <title>瀑布流</title>
    <style type="text/css">
        #main {
            position: relative;
        }
        .box {
            padding: 5px;
            float: left;
        }
        .pic {
            height: auto;
            padding: 5px;
            border: 1px solid gray;
            border-radius: 5px;
        }
            .pic img {
                width: 200px;
            }
    </style>
    <script type="text/javascript" src="jquery-1.9.1.js"></script>
    <script>
        window.onload = function () {
            waterfall();
        }
        window.onscroll = function () {
            var lastBox = $("#main>div").last();
            var lastH = lastBox.offset().top + Math.floor(lastBox.outerHeight());
            var soc = $(window).scrollTop();
            var docHeight = $(window).height();
            if (lastH - docHeight - soc < 50) {
                console.log("加载" + (lastH - docHeight - soc));
                var jsonData = {
                    "data": [
                        { "src": "images/02.jpg" }, { "src": "images/03.jpg" },
                        { "src": "images/01.jpg" }, { "src": "images/02.jpg" },
                        { "src": "images/03.jpg" }, { "src": "images/04.jpg" },
                        { "src": "images/04.jpg" }, { "src": "images/02.jpg" },
                        { "src": "images/05.jpg" }, { "src": "images/04.jpg" },
                    ]
                };
                $(jsonData.data).each(function (i, item) {
                    var oBox = $("<div>").addClass("box").appendTo($("#main"));
                    var pic = $("<div>").addClass("pic").appendTo(oBox);
                    $("<img>").attr("src", item.src).appendTo(pic);
                });
                waterfall();
            }
        }
        function waterfall() {
            var $box = $("#main>div");
            var w = $box.eq(0).outerWidth();
            var cols = Math.floor($(window).width() / w);
            $("#main").width(w * cols).css("margin", "0 auto");
            var hArr = [];
            $box.each(function (i, item) {
                var h = $box.eq(i).outerHeight();
                if (i < cols) {
                    hArr[i] = h;
                } else {
                    var minH = Math.min.apply(null, hArr);
                    var minInx = $.inArray(minH, hArr);
                    // console.log(minH + '--' + minInx);
                    $(item).css({
                        "position": "absolute",
                        "top": minH + "px",
                        "left": minInx * w + "px"
                    });
                    hArr[minInx] += $box.eq(i).outerHeight();
                }
            });
        }
    </script>
</head>
<body>
    <div id="main">
        <div class="box">
            <div class="pic">
                <img src="images/01.jpg" />
            </div>
        </div>
    </div>
</body>
</html>

转载于:https://www.cnblogs.com/jzb-dev/p/4759271.html