html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>瀑布流效果--规则的(局部刷新)</title>
<style type="text/css">
/* 公用样式 */
body{padding:0;margin:0;}
img{border:none;}
a{text-decoration:none;color:#444;}
a:hover{color:#999;}
#title{width:600px;margin:20px auto;text-align:center;}
/* wrap */
#wrap{width:auto;height:auto;margin:0 auto;position:relative;}
#wrap .box{width:280px;height:auto;padding:10px;border:none;float:left;}
#wrap .box .info{width:280px;height:310px;border-radius:8px;box-shadow:0 0 11px #666;background:#fff;}
#wrap .box .info .pic{width:260px;height:260px;margin:0 auto;padding-top:10px;}
#wrap .box .info .pic img{width:260px;border-radius:3px;}
#wrap .box .info .title{width:260px;height:40px;margin:0 auto;line-height:40px;text-align:center;color:#666;font-size:18px;font-weight:bold;overflow:hidden;}
</style>
</head>
<body>
<section id="title">
<h2>js瀑布流效果特效代码</h2>
</section>
<div id="wrap">
<div class="box">
<div class="info">
<div class="pic"><img src="images/1.jpg"></div>
<div class="title"><a href="www.baidu" target="_blank"> 瀑布流效果</a></div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="images/2.jpg"></div>
<div class="title">瀑布流效果</div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="images/3.jpg"></div>
<div class="title">瀑布流效果</div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="images/4.jpg"></div>
<div class="title">瀑布流效果</div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="images/5.jpg"></div>
<div class="title">瀑布流效果</div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="images/6.jpg"></div>
<div class="title">瀑布流效果</div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="images/7.jpg"></div>
<div class="title">瀑布流效果</div>
</div>
</div>
</div>
<script src="js/jquery-1.8.3.min.js" ></script>
<!--<script src="js/index.js" type="text/javascript"></script>-->
<script src="js/my.js" type="text/javascript"></script>
</body>
</html>
js部分
$(function () {
var wrap=$("#wrap");
//var box=$(".box");
$(window).scroll(function () {
//获取滚轮滚动到当前位置的页面的高度=窗口的高度+卷曲出去的高度
var boxH=$(window).height()+$(window).scrollTop();
//获取页面高度=最后一个小盒子的高度+最后一个小盒子距离顶部的距离
var lastBox=$(".box").last().height()+$(".box").last().offset().top;
//到底了就加数据
if(boxH>=lastBox){
$.ajax({
type:"get",
url:"6.json",
dataType:"json",
success:function (data) {
// console.log(data);
for(var key in data){
var innerBox=$('<div class="box">\n' +
' <div class="info">\n' +
' <div class="pic"><img src="images/'+data[key].src+'"></div>\n' +
' <div class="title">'+data[key].title+'</div>\n' +
' </div>\n' +
' </div>');
innerBox.appendTo(wrap);
}
}
});
};
});
});
6.json部分
[
{"src":"1.jpg","title":"111"},
{"src":"2.jpg","title":"222"},
{"src":"3.jpg","title":"333"},
{"src":"4.jpg","title":"444"},
{"src":"5.jpg","title":"555"},
{"src":"6.jpg","title":"666"},
{"src":"7.jpg","title":"777"},
{"src":"8.jpg","title":"888"},
{"src":"7.jpg","title":"777"},
{"src":"8.jpg","title":"888"}
]