Jquery 实现瀑布流布局

浏览数：26 / 时间：2015年06月09日

//保证img文件夹下有图片
//引入jquery 
<script src="Script/jquery-1.7.2.js"></script>

<style>
        * {
            padding: 0;
            margin: 0;
        }

        #main {
            position: relative;
        }

        .pin {
            padding: 10px 0 0 10px;
            float: left;
        }

        .box {
            padding: 10px;
            border: 1px solid #ccc;
            box-shadow: 0 0 6px #ccc;
            border-radius: 5px;
            height:90%;
        }

            .box img {
                width: 162px;
                height: auto;
            }
    </style>
<body>
    <form id="form1" runat="server">
        <div id="main">
            <div class="pin">
                <div class="box">
                    <img src="img/1.jpg" />
                </div>
            </div>

            <div class="pin">
                <div class="box">
                    <img src="img/2.jpg" />
                </div>
            </div>
            <div class="pin">
                <div class="box">
                    <img src="img/3.jpg" />
                </div>
            </div>
            <div class="pin">
                <div class="box">
                    <img src="img/4.jpg" />
                </div>
            </div>
            <div class="pin">
                <div class="box">
                    <img src="img/5.jpg" />
                </div>
            </div>
            <div class="pin">
                <div class="box">
                    <img src="img/6.jpg" />
                </div>
            </div>
            <div class="pin">
                <div class="box">
                    <img src="img/7.jpg" />
                </div>
            </div>
            <div class="pin">
                <div class="box">
                    <img src="img/8.jpg" />
                </div>
            </div>
        </div>
    </form>
</body>

////////////js

<script>
    window.onload = function () {
        waterfall();//加载时成瀑布流效果
        var imgss = { "data": [{ "src": "img/1.jpg" }, { "src": "img/2.jpg" }, { "src": "img/3.jpg" }, { "src": "img/4.jpg" }, { "src": "img/5.jpg" }, ] };
        $(window).on("scroll", function () {
            if (fun_scroll()) {
                for (var i = 0; i < imgss.data.length; i++) {
                    var div_pin = $("<div>").addClass("pin");
                    var div_box = $("<div>").addClass("box");
                    div_box.appendTo(div_pin);
                    var img = $("<img>").attr("src", imgss.data[i].src);
                    img.appendTo(div_box);
                    div_pin.appendTo($("#main"));
                    waterfall();
                }
            }
        });
    }
    
    //设置瀑布流
    function waterfall() {
        ////获取单个宽度
        /////////////$(".pin").width();//只获取元素的真实宽度
        /////////////document.getElementById("id")offsetWidth;//获取元素加上外间距的宽度
        var objWidth = $(".pin:eq(0)").get(0).offsetWidth;//.width();
        ////获取每行个数document.documentElement.clientWidth
        var num = Math.floor($(document).width() / objWidth);
        $("#main").css({ "width": (objWidth * num) + "px", "margin": "0 auto" });
        var heigs = [];
        $(".pin").each(function (i, obj) {
            if (i < num) {
                heigs.push($(obj).get(0).offsetHeight);
            } else {
                //获取最小的值
                var mixh = Math.min.apply(null, heigs);
                //获取值的索引
                var inx = $.inArray(mixh, heigs, null);
                $(obj).css({
                    "position": "absolute",
                    "top": mixh,
                    "left": $(".pin").eq(inx).position().left,
                });
                heigs[inx] += $(obj).get(0).offsetHeight;
            }
        });
    }

    //滚动，滚动条时动态加载图片
    var fun_scroll = function () {
        //最后一个元素距离顶部的高度+自身一半高度
        var lastObjHeight = Math.floor($(".pin").last().offset().top) + Math.floor($(".pin").last().height() / 2);
        //卷进去的高度
        var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop;
        //屏幕的高度
        var deviceheight = document.documentElement.clientHeight;
        return ((deviceheight + scrollHeight) > lastObjHeight) ? true : false;
    }
</script>