masonry+infinitescrol 插件来实现瀑布流布局产生的问题。。。。。
在使用插件来布局时，瀑布流布局已经布局好，但是在使用 infinite scroll 来无限加载时出现了问题，默认应该是 到滚动条滚动到最低端，或距离最低端有些距离时开始新加载内容，但我看管方的Demo 没有问题。我拿来问题出现了，不管滚动条距离底下多少，只要滚动一下，它就加载。郁闷。。。。。我来发图给大家看一下。
官方的Demo：http://masonry.desandro.com/demos/infinite-scroll.html
图片1：
图片2：
HTML 代码：
<!--容器代码-->
<div id="container">
<div class="waterfall">
<a href=""><img alt="masonry+infinitescrol 插件来实现瀑布流布局产生的有关问题。" src="images/P (1).jpg"></a>
<p>精致体验：LOFTER追求精致入微的视觉和交互体验，为每一片内容精心度量，让你的视角所触及的每一个像素，都蕴含独具匠心的精致设计。</p>
</div>
<div class="waterfall">
<a href=""><img alt="masonry+infinitescrol 插件来实现瀑布流布局产生的有关问题。" src="images/P (1).jpg"></a>
<p>精致体验：LOFTER追求精致入微的视觉和交互体验，为每一片内容精心度量，让你的视角所触及的每一个像素，都蕴含独具匠心的精致设计。</p>
</div>
<!-- 还有好多。。。省略了。。。 -->
</div>
<!--分页代码-->
<div class="navigation" id="pnavigation">
<a href="page/2.html">下一页</a>
</div>
#container { position: relative; margin:0px auto; padding:15px 10px; }
.waterfall {
position: absolute;
top:1000px;
left:-1000px;
border: 1px solid #DFDFDF;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
padding: 10px;
background-color: #FFF;
width:192px;
margin-top:15px;
-webkit-transition: left .3s ease-in-out,top .3s ease-in-out;
-moz-transition: left .5s ease-in-out,top .5s ease-in-out;
-o-transition: left .3s ease-in-out,top .3s ease-in-out;
transition: left .3s ease-in-out,top .3s ease-in-out;
}
.navigation { display:none; padding:10px 0px; text-align:center; }
.navigation a { display:inline-block; padding:2px 5px; border:1px solid #999; background:#FFF; margin:0px 10px; text-shadow:0px 1px 2px rgba(0,0,0,0.5); }
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.masonry.min.js"></script>
<script type="text/javascript" src="js/jquery.infinitescroll.min.js"></script>
<script type="text/javascript">
$(function(){
var $container = $('#container');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.waterfall',
gutterWidth:15,
isFitWidth:true,
isResizableL:true,
columnWidth: 214
});
});
$container.infinitescroll({
navSelector : '#pnavigation', // selector for the paged navigation
nextSelector : '#pnavigation a', // selector for the NEXT link (to page 2)
itemSelector : '.waterfall', // selector for all items you'll retrieve
loading: {
finishedMsg: 'No more pages to load.',
img: 'http://i.imgur.com/6RMhx.gif'
}
},
// trigger Masonry as a callback
function( newElements ) {
// hide new items while they are loading
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);
});
</script>
