用jQuery实现瀑布流及滚动懒加载（兼容IE8）
上篇
js原生瀑布流并实现滚动懒加载（兼容IE8）
讲解了瀑布流的原理及滚动懒加载的原理，并用原生js实现了效果，那么原生js必定有些繁琐和麻烦，这一篇我们就换成jQuery，代码会简洁很多，思路和原理我就不赘述了，如果想看的话，移步
js原生瀑布流并实现滚动懒加载（兼容IE8）
就可以了
废话不多说我们直接上代码，思路和原理跟原生js一模一样
html部分：
<!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">
<link rel="stylesheet" href = "./css/waterfall.css">
<title>jquery瀑布流布局</title>
</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>
<!--[if lt IE 9]>
<script src="./js/jquery-1.9.1.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="./js/jquery-3.3.1.min.js"></script>
<!--<![endif]-->
<script src = "./js/waterfall.js"></script>
</body>
</html>
css部分：
*{
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;
}
js部分：
$(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;
}
下面我们来看下最终效果
懒加载效果：
是不是觉得换了jQuery之后简单了许多啊，哈哈！注意：此代码依然兼容IE8！