JQ瀑布流兼容IE5+ 、360、chrome

最新推荐文章于 2021-12-21 17:47:12 发布

CherishXt

最新推荐文章于 2021-12-21 17:47:12 发布

阅读量263

点赞数

分类专栏：前端

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

最近要用到瀑布流功能，又要兼容IE，然后查询资料后找到这个很简单的示例。亲测360，IE5以上，谷歌都没有问题。我测试JQ版本是1.72的

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>jquery瀑布流布局</title>
	<script src="jquery.js"></script>
	<style>
		*{
			margin:0;
			padding:0;
		}
		#main{
			position: relative;
		}
		.box{
			padding:15px 0 0 15px;
			float:left;
		}
		.pic{
			padding:10px;
			border:1px solid #ccc;
			border-radius: 5px;
			box-shadow: 0 0 5px #ccc;
		}
		.pic img{
			width:165px;
			height:auto;
		}
	</style>
	<script>
        $(window).on("load",function(){
            waterfall();
            var dataInt = {
                "data":[
                    {
                        "src":'./img/1.jpg'
                    },
                    {
                        "src":'./img/3.jpg'
                    },
                    {
                        "src":'./img/5.jpg'
                    },
                    {
                        "src":'./img/8.jpg'
                    },
                    {
                        "src":'./img/12.jpg'
                    }
                ]
            };
            $(window).on("scroll",function(){
                if(checkScrollSlide){
                    $.each(dataInt.data,function(key,value){
                        var oBox = $("<div>").addClass('box').appendTo($("#main"));
                        var oPic = $("<div>").addClass('pic').appendTo($(oBox));
                        var oImg = $("<img>").attr("src",$(value).attr("src")).appendTo($(oPic));
                    });
                    waterfall();
                }
            })
        })
        function waterfall(){
            var $boxs = $("#main>div");
            //获取box的宽度
            var w = $boxs.eq(0).outerWidth();
            var cols = Math.floor($(window).width()/w);
            $("#main").width(w*cols).css('margin','0 auto');
            var hArr = [];
            $boxs.each(function(index,value){
                var h = $boxs.eq(index).outerHeight();
                if(index < cols){
                    hArr[index] = h;
                }else{
                    var minH = Math.min.apply(null,hArr);
                    var minHIndex = $.inArray(minH,hArr);
                    $(value).css({
                        'position':'absolute',
                        'top':minH + 'px',
                        'left':minHIndex*w + 'PX'
                    })
                    hArr[minHIndex] += $boxs.eq(index).outerHeight();
                }
            })
        }
        //图片懒加载
        function checkScrollSlide(){
            var $lastBox = $("#main>div").last();
            var lastBoxDis = $lastBox.offset().top + Math.floor($lastBox.outerHeight()/2);
            var srcollTop = $(window).srcollTop();
            var documentH = $(window).height();
            return (lastBoxDis < srcollTop + documentH) ? true : false;
        }
	</script>
</head>
<body>
<div id = "main">
	<div class = "box">
		<div class = "pic">
			<img src = "./img/1.jpg" alt="">
		</div>
	</div>
	<div class = "box">
		<div class = "pic">
			<img src = "./img/2.jpg" alt="">
		</div>
	</div>
	<div class = "box">
		<div class = "pic">
			<img src = "./img/3.jpg" alt="">
		</div>
	</div>
	<div class = "box">
		<div class = "pic">
			<img src = "./img/4.jpg" alt="">
		</div>
	</div>
	<div class = "box">
		<div class = "pic">
			<img src = "./img/5.jpg" alt="">
		</div>
	</div>
	<div class = "box">
		<div class = "pic">
			<img src = "./img/6.jpg" alt="">
		</div>
	</div>
	<div class = "box">
		<div class = "pic">
			<img src = "./img/7.jpg" alt="">
		</div>
	</div>
	<div class = "box">
		<div class = "pic">
			<img src = "./img/8.jpg" alt="">
		</div>
	</div>
	<div class = "box">
		<div class = "pic">
			<img src = "./img/9.jpg" alt="">
		</div>
	</div>
	<div class = "box">
		<div class = "pic">
			<img src = "./img/10.jpg" alt="">
		</div>
	</div>
	<div class = "box">
		<div class = "pic">
			<img src = "./img/11.jpg" alt="">
		</div>
	</div>
	<div class = "box">
		<div class = "pic">
			<img src = "./img/12.jpg" alt="">
		</div>
	</div>
	<div class = "box">
		<div class = "pic">
			<img src = "./img/13.jpg" alt="">
		</div>
	</div>
	<div class = "box">
		<div class = "pic">
			<img src = "./img/14.jpg" alt="">
		</div>
	</div>
	<div class = "box">
		<div class = "pic">
			<img src = "./img/15.jpg" alt="">
		</div>
	</div>
	<div class = "box">
		<div class = "pic">
			<img src = "./img/16.jpg" alt="">
		</div>
	</div>
	<div class = "box">
		<div class = "pic">
			<img src = "./img/17.jpg" alt="">
		</div>
	</div>
	<div class = "box">
		<div class = "pic">
			<img src = "./img/18.jpg" alt="">
		</div>
	</div>
	<div class = "box">
		<div class = "pic">
			<img src = "./img/19.jpg" alt="">
		</div>
	</div>
	<div class = "box">
		<div class = "pic">
			<img src = "./img/20.jpg" alt="">
		</div>
	</div>
	<div class = "box">
		<div class = "pic">
			<img src = "./img/10.jpg" alt="">
		</div>
	</div>
	<div class = "box">
		<div class = "pic">
			<img src = "./img/11.jpg" alt="">
		</div>
	</div>
	<div class = "box">
		<div class = "pic">
			<img src = "./img/12.jpg" alt="">
		</div>
	</div>
	<div class = "box">
		<div class = "pic">
			<img src = "./img/13.jpg" alt="">
		</div>
	</div>
	<div class = "box">
		<div class = "pic">
			<img src = "./img/14.jpg" alt="">
		</div>
	</div>
	<div class = "box">
		<div class = "pic">
			<img src = "./img/15.jpg" alt="">
		</div>
	</div>
	<div class = "box">
		<div class = "pic">
			<img src = "./img/16.jpg" alt="">
		</div>
	</div>
	<div class = "box">
		<div class = "pic">
			<img src = "./img/17.jpg" alt="">
		</div>
	</div>
	<div class = "box">
		<div class = "pic">
			<img src = "./img/18.jpg" alt="">
		</div>
	</div>
	<div class = "box">
		<div class = "pic">
			<img src = "./img/19.jpg" alt="">
		</div>
	</div>
	<div class = "box">
		<div class = "pic">
			<img src = "./img/20.jpg" alt="">
		</div>
	</div>
</div>
</body>
</html>