我一直在使用 JQuery masonry,现在我正在添加无限滚动。几乎每个砖石“砖块”中都有图像,在我使用无限滚动之前,图像加载得很好,一切都很棒。我为无限滚动添加了 javascript 的下一部分,并在内部添加了 imagesLoaded 方法,但是当附加新砖块时,它们全部堆在顶部。我的假设是我没有在无限滚动回调中正确添加 imagesLoaded 方法,但我无法找到我的错误。这是代码
<script type="text/javascript">
$(function(){
var $container = $('#container');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : '.tile',
columnWidth : 240
});
});
var $container = $('#container');
$container.infinitescroll({
navSelector : ".flickr_pagination",
// selector for the paged navigation (it will be hidden)
nextSelector : "a.next_page",
// selector for the NEXT link (to page 2)
itemSelector : "div.tile"
// selector for all items you'll retrieve
},
// trigger Masonry as a callback
function( newElements ) {
var $newElems = $( newElements );
$container.imagesLoaded(function() {
masonry( 'appended', $newElems );
});
}
);
});
</script>
第一个 JQuery 砌体调用工作正常并且尚未被触及。这是第二部分,似乎有问题。感谢您的帮助,如果您需要更多信息,请告诉我。
答案如下
$(function(){
var $container = $('#container');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : '.tile',
columnWidth : 240
});
});
$container.infinitescroll({
navSelector : '.flickr_pagination', // selector for the paged navigation
nextSelector : 'a.next_page', // selector for the NEXT link (to page 2)
itemSelector : '.tile', // 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 );
});
}
);
});
问题是我在无限滚动回调函数中对 $container 调用 .imagesLoaded() ,而我应该在 $newElements 上调用它。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)