jQuery瀑布流+无限加载图片

<!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>

希望你们能用到

 

转载于:https://www.cnblogs.com/Mousika/p/7219852.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值