jquery+javaScript完成瀑布流图片页面效果

效果如图：

html:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/image.css"/>
        <script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
        <script type="text/javascript" src="js/image.js" ></script>
    </head>

    <body>
        <div class="content">
            <div class="box">
                <div class="img_box"><img src="img/1.jpg" alt="" /></div>
            </div>
            <div class="box">
                <div class="img_box"><img src="img/2.jpg" alt="" /></div>
            </div>
            <div class="box">
                <div class="img_box"><img src="img/3.jpg" alt="" /></div>
            </div>
            <div class="box">
                <div class="img_box"><img src="img/4.jpg" alt="" /></div>
            </div>
            <div class="box">
                <div class="img_box"><img src="img/5.jpg" alt="" /></div>
            </div>
            <div class="box">
                <div class="img_box"><img src="img/6.jpg" alt="" /></div>
            </div>
            <div class="box">
                <div class="img_box"><img src="img/7.jpg" alt="" /></div>
            </div>
            <div class="box">
                <div class="img_box"><img src="img/8.jpg" alt="" /></div>
            </div>
        </div>
    </body>

</html>

css:

* {
    padding: 0;
    margin: 0;
}

.content {
    position: relative;
}

.box {
    float: left;
    padding: 12px 0px 0px 10px;
}

.img_box {
    padding: 10px;
    border: solid 1px black;
    border-radius: 10px;
    box-shadow: 5px 5px 5px 2px darkgray;
}

.img_box:hover {
    margin: 12px;
    box-shadow: 3px 3px 3px 3px darkgray;
}

img {
    width: 400px;
}

.toast {
    position: fixed;
    width: 170px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    box-shadow: 5px 5px 5px 2px darkgray;
    border-radius: 20px;
    background: cornflowerblue;
    top: 600px;
    left: 600px;
    color: white;
    font-weight: bold;
    font-size: 20px;
}

js:

$(document).ready(function() {
    window.onload = init; //当图片加载完后
    window.onscroll = sc; //当滚动进度条时
    $(window).resize(init); //当浏览器页面大小改变时

    function sc() {
        //如果屏幕可见高度+滚动高度>=最后一张图片的高度+最后一张图片的一半，那么自动加载
        if(($(window).scrollTop() + document.documentElement.clientHeight) >=
            ($(".box").last().position().top + $(".box").last().outerHeight() / 2)) {
            //加载更多
            for(var i = 1; i < 26; i++) {
                $(".content").append("<div class=\"box\"><div class=\"img_box\"><img src=\"img/" + i + ".jpg\" /></div></div>");
            }
            $("body").append("<div class=\"toast\">加载中……</div>");
            //设置延时自动关闭
            setTimeout(function() {    $(".toast").hide(200);}, 1000)
            init();
        }
    }

    function init() {
        /**
         * 瀑布流图片代码分析
         * 得到第一行图片个数、最短图片位置
         * 个数：总长度/box长度
         */
        //得到屏幕长度
        var clientW = document.body.clientWidth;
        //得到单个box的长度
        var box = $(".box").outerWidth();
        //得到一行的个数
        var count = parseInt(clientW / box);
        //把图片在页面中居中
        $(".content").css({
            marginLeft: (clientW - box * count) / 2
        })

        var start = 0;
        var end = start + count;
        //循环，把个数的高传入数组
        var arr = [];
        $(".box").slice(start, end).each(function() {
            arr.push($(this).outerHeight());
        })

        //循环，每次都要改变最短图片的位置
        $(".box").each(function(n) {
            //得到最短的图片及它所出现的位置，从0开始
            var minHei = Math.min.apply(null, arr);
            var posit = $.inArray(minHei, arr);
            //即将要出现的图片的左边距就是位置*box长度
            var width = posit * box;
            //如果是第一行后面的图片
            if(n >= count) { //如果是除第 一行后的后面几张
                $(this).css({
                    "position": "absolute",
                    "left": width,
                    "top": minHei,
                });
                arr[posit] += $(this).outerHeight();
            }
        })
    }

})

posted @ 2016-07-12 17:11 春风自是人间客阅读(292) 评论(0) 编辑收藏举报

春风自是人间客

jquery+javaScript完成瀑布流图片页面效果

公告