1
我想使用jQuery插件Infinite-Scroll没有成功。我的问题是,插件只是不工作,没有任何反应,甚至控制台错误,一切看起来都很好。我需要使用这个,因为我打算使用另一个插件(jQuery Masonry)及其支持并推荐Infinite-Scroll。我得到砌体工作很容易,但不是无限滚动。无法获得无限滚动工作。 (jQuery插件)
所以我开始在测试页面单独测试无限滚动,但没有。 有什么帮助吗?
的test.html
<!DOCTYPE html>
<html>
<head>
<title>Infinite-Scroll Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="jquery.infinitescroll.min.js"></script>
<style>
#container {
width: 600px;
margin: 30px auto;
}
.element {
background: #666;
width: 100px;
height: 500px;
margin: 5px;
float: left;
}
</style>
</head>
<body>
<script>
$(function() {
var $container = $('#container');
$container.infinitescroll({
navSelector : '#page-nav', // selector for the paged navigation
nextSelector : '#page-nav a', // selector for the NEXT link (to page 2)
itemSelector : '.element', // selector for all items you'll retrieve
loading: {
finishedMsg: 'No more pages to load.',
img: 'http://i.imgur.com/6RMhx.gif'
}
});
});
</script>
<div id="container">
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
<div class="element">
test
</div>
</div>
<nav id="page-nav">
<a href="next.html"></a>
</nav>
</body>
</html>
next.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="container">
<div class="element">
new one
</div>
<div class="element">
new one
</div>
<div class="element">
new one
</div>
<div class="element">
new one
</div>
<div class="element">
new one
</div>
<div class="element">
new one
</div>
<div class="element">
new one
</div>
<div class="element">
new one
</div>
<div class="element">
new one
</div>
<div class="element">
new one
</div>
<div class="element">
new one
</div>
<div class="element">
new one
</div>
<div class="element">
new one
</div>
<div class="element">
new one
</div>
</div>
</body>
</html>