最近要用到瀑布流功能,又要兼容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>