您的位置：首页 > Web前端 > JQuery

关于用jquery.masonry.js实现动态加载效果(当页面滚动条拉到底部时时重新加载图片)

2014-06-23 16:42 1371 查看 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<meta charset="utf-8"/>
<title>动画效果</title>
<head>
<style>
#Books{
width: 1000px;
height: auto;
margin: 0 auto;
}
.container-fluid {
padding: 20px;
}
.box {
margin-bottom: 20px;
float: left;
width: 220px;
}
.box img {
max-width: 100%
}
</style>
<script src="jquery1-11.js"></script>
<script src="jquery.masonry.min.js"></script>

</head>
<body>
<div id="Books">
<div id="masonry" class="container-fluid">
<div class="box"><img src="1.jpg"></div>
<div class="box"><img src="2.jpg"></div>
<div class="box"><img src="3.jpg"></div>
<div class="box"><img src="4.jpg"></div>
<div class="box"><img src="5.jpg"></div>
<div class="box"><img src="6.jpg"></div>
<div class="box"><img src="7.jpg"></div>
<div class="box"><img src="8.jpg"></div>
<div class="box"><img src="9.jpg"></div>
<div class="box"><img src="10.jpg"></div>
<div class="box"><img src="1.jpg"></div>
<div class="box"><img src="2.jpg"></div>
<div class="box"><img src="3.jpg"></div>
<div class="box"><img src="4.jpg"></div>
<div class="box"><img src="5.jpg"></div>
<div class="box"><img src="6.jpg"></div>
<div class="box"><img src="7.jpg"></div>
<div class="box"><img src="8.jpg"></div>
<div class="box"><img src="9.jpg"></div>
<div class="box"><img src="10.jpg"></div>
<div class="box"><img src="1.jpg"></div>
<div class="box"><img src="2.jpg"></div>
<div class="box"><img src="3.jpg"></div>
<div class="box"><img src="4.jpg"></div>
<div class="box"><img src="5.jpg"></div>
<div class="box"><img src="6.jpg"></div>
<div class="box"><img src="7.jpg"></div>
<div class="box"><img src="8.jpg"></div>
<div class="box"><img src="9.jpg"></div>
<div class="box"><img src="10.jpg"></div>

</div>
</div>

<script type="text/javascript">
var $container = $('#masonry');

$container.imagesLoaded(function() {
$container.masonry({
itemSelector: '.box',
gutterWidth: 20,
isAnimated: true
});
});
$(window).scroll(function(){
var scrollTop = $(this).scrollTop();var scrollHeight = $(document).height();var windowHeight = $(this).height();
if(scrollTop + windowHeight == scrollHeight){
$('#masonry').append('<div class="box"><img src="1.jpg"></div><div class="box"><img src="2.jpg"></div><div class="box"><img src="3.jpg"></div> <div class="box"><img src="4.jpg"></div><div class="box"><img src="5.jpg"></div><div class="box"><img src="6.jpg"></div><div class="box"><img src="7.jpg"></div><div class="box"><img src="8.jpg"></div><div class="box"><img src="9.jpg"></div><div class="box"><img src="10.jpg"></div>');

$container.masonry('reload');
}
})
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html 瀑布流 javascript
相关文章推荐
新的分享
章节导航