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:;

    margin:;

}

.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();

            }

        })

    }

})

秒客网

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

相关文章