masonry 瀑布流布局滑动到底部加载更多
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<title>瀑布流动画效果</title>
<head>
<style>
#Books{
width: 500px;
height: auto;
margin: 0 auto;
}
.container-fluid {
padding: 20px;
}
.box {
margin-bottom: 20px;
float: left;
width: 220px;
}
.box img {
max-width: 100%
}
</style>
</head>
<body>
<div id="Books">
<div id="masonry" class="container-fluid">
<div class="box"><img src=""></div>
<div class="box"><img src=""></div>
<div class="box"><img src=""></div>
<div class="box"><img src=""></div>
<div class="box"><img src=""></div>
<div class="box"><img src=""></div>
<div class="box"><img src=""></div>
<div class="box"><img src=""></div>
<div class="box"><img src=""></div>
<div class="box"><img src=""></div>
<div class="box"><img src=""></div>
<div class="box"><img src=""></div>
<div class="box"><img src=""></div>
<div class="box"><img src=""></div>
<div class="box"><img src=""></div>
<div class="box"><img src=""></div>
<div class="box"><img src=""></div>
<div class="box"><img src=""></div>
<div class="box"><img src=""></div>
<div class="box"><img src=""></div>
<div class="box"><img src=""></div>
<div class="box"><img src=""></div>
<div class="box"><img src=""></div>
<div class="box"><img src=""></div>
<div class="box"><img src=""></div>
<div class="box"><img src=""></div>
<div class="box"><img src=""></div>
<div class="box"><img src=""></div>
<div class="box"><img src=""></div>
<div class="box"><img src=""></div>
</div>
</div>
<script src="/jquery/1.11.3/"></script>
<script src=""></script>
<script type="text/javascript">
var $container = $('#masonry');
$(function() {
$({
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=""></div><div class="box"><img src=""></div><div class="box"><img src=""></div> <div class="box"><img src=""></div><div class="box"><img src=""></div><div class="box"><img src=""></div><div class="box"><img src=""></div><div class="box"><img src=""></div><div class="box"><img src=""></div><div class="box"><img src=""></div>');
$('reload');
}
})
</script>
</body>
</html>