jQuery瀑布流+无限加载图片

最新推荐文章于 2021-09-25 12:26:23 发布

a115544

最新推荐文章于 2021-09-25 12:26:23 发布

阅读量141

点赞数

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/Mousika/p/7219852.html

版权

<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>


<style>
            * {
                margin: 0px;
                padding: 0px;
            }
            
            #contianer {
                position: relative;
                font-size: 0;
                margin: 0 auto;
            }
            
            .box {
                padding: 5px;
                float: left;
                box-sizing: border-box;
            }
            
            .boximg {
                padding: 5px;
                box-shadow: 0 0 5px #ccc;
                border: 1px solid #cccccc;
                border-radius: 5px;
            }
            
            .boximg img {
                width: 250px;
                height: auto;
                position: relative;
            }
            #mask{
                width: 250px;
                height: auto;
                background: red;
                position: absolute;
                z-index: 1;
            }
            #mask:hover{
                background: salmon;
                z-index: 2;
            }
        </style>

这是css代码,具体结构视情况而定

然后是body布局

<div id="container">
            <div class="box">
                <div class="boximg">
                    <img src="img/1.jpg">
                    <div id="mask"></div>
                </div>
            </div>
            <div class="box">
                <div class="boximg">
                    <img src="img/2.jpg">
                </div>
            </div>
            <div class="box">
                <div class="boximg">
                    <img src="img/3.jpg">
                </div>
            </div>
            <div class="box">
                <div class="boximg">
                    <img src="img/4.jpg">
                </div>
            </div>
            <div class="box">
                <div class="boximg">
                    <img src="img/5.jpg">
                </div>
            </div>
            <div class="box">
                <div class="boximg">
                    <img src="img/6.jpg">
                </div>
            </div>
            <div class="box">
                <div class="boximg">
                    <img src="img/7.jpg">
                </div>
            </div>
            <div class="box">
                <div class="boximg">
                    <img src="img/8.jpg">
                </div>
            </div>
            <div class="box">
                <div class="boximg">
                    <img src="img/9.jpg">
                </div>
            </div>
            <div class="box">
                <div class="boximg">
                    <img src="img/10.jpg">
                </div>
            </div>
            <div class="box">
                <div class="boximg">
                    <img src="img/11.jpg">
                </div>
            </div>
            <div class="box">
                <div class="boximg">
                    <img src="img/12.jpg">
                </div>
            </div>
            <div class="box">
                <div class="boximg">
                    <img src="img/13.jpg">
                </div>
            </div>
            <div class="box">
                <div class="boximg">
                    <img src="img/14o.jpg">
                </div>
            </div>
            <div class="box">
                <div class="boximg">
                    <img src="img/15.jpg">
                </div>
            </div>
            <div class="box">
                <div class="boximg">
                    <img src="img/2.jpg">
                </div>
            </div>
            <div class="box">
                <div class="boximg">
                    <img src="img/3.jpg">
                </div>
            </div>
        </div>

图片引入多少看自己

然后引入jquery-1.8.3.js，(这里其他js文件可不可以我没试过)

最后js代码:

思路如下:

<script>
        //思路如下：  
        $(function() {
            var imgWidth = $(".box").innerWidth(); //获得每个div的宽度，包括内边距  
            var screenWidth = $(window).width(); //获得浏览器可视区域的宽度  
            var num = Math.floor(screenWidth / imgWidth); //计算一行可以放几个div  
            $("#container").css({
                "width": num * imgWidth + "px",
                "margin": "0 auto"
            }); //根据每行放的div的总长来给容器一个宽度，然后居中显示  
            function waterFlow() {
                var arr = []; //定义一个数组  
                for(var i = 0; i < $(".box").length; i++) {
                    if(i < num) { //一行显示num个div,将第一行的每个div高度写入数组  
                        arr[i] = $(".box").eq(i).innerHeight();
                    } else {
                        var minImgHeight = Math.min.apply(null, arr); //取得数组中最小高度的div  
                        var index = getMinIndex(arr, minImgHeight); //取得数组中最小高度的div的索引  
                        $(".box").eq(i).css({
                            "position": "absolute",
                            "top": minImgHeight + "px",
                            "left": $(".box").eq(index).offset().left + "px"
                        }); //瀑布流布局  
                        arr[index] += $(".box").eq(i).innerHeight(); //将布局好的该div的高度和该div上面的div高度相加，重新放入数组  
                    }
                }
            }

            function getMinIndex(arr, min) { //取得数组中最小高度的div的索引  
                for(var i in arr) {
                    if(arr[i] == min) {
                        return i;
                    }
                }
            }

            function checkScrollDirector() { //判断滚动条是否滑到底部  
                var flag = 0;
                if($(document).scrollTop() + $(window).height() >= $(document).height()) {
                    flag = 1;
                }
                return flag;
            }
            console.log($(document).height())
            console.log($(window).height())
            window.onload = function() {
                waterFlow(); //图片加载完毕执行  
                var json = {
                    "data": [{
                            "src": "img/1.jpg"
                        }, {
                            "src": "img/2.jpg"
                        }, {
                            "src": "img/3.jpg"
                        }, {
                            "src": "img/4.jpg"
                        }, {
                            "src": "img/5.jpg"
                        },
                        {
                            "src": "img/6.jpg"
                        }, {
                            "src": "img/7.jpg"
                        }, {
                            "src": "img/8.jpg"
                        }, {
                            "src": "img/9.jpg"
                        }, {
                            "src": "img/10.jpg"
                        },
                        {
                            "src": "img/11.jpg"
                        }, {
                            "src": "img/12.jpg"
                        }
                    ]
                };
                window.onscroll = function() { //滚动条滚动执行  
                    if(checkScrollDirector()) {
                        for(var i = 0; i < json.data.length; i++) {
                            var html = "<div class='box'><div class='boximg'><img src=" + json.data[i].src + "></div></div>";
                            $("#container").append(html); //向容器内一次性添加12个图片  
                            console.log(1);
                        }
                        waterFlow(); //瀑布流布局  
                    }
                }
            }
        })
    </script>