我在我的网站上使用Masonry和Infinite Scroll来加载内容。但是,无论何时达到Infinite Scroll加载到新内容中的点,图像都会相互重叠。我已经尝试过所有我无法解决的事情。有什么想法吗?
HTML
<div id="container" class="js-masonry infinite-scroll" data-masonry-options='{ "isFitWidth": true }'>
{% paginate blog.articles by 20 %}
{% for article in blog.articles %}
<div class="item">
<div class="overlay">
<a href="{{ article.url }}">{{ article.content }}</a>
</div>
</div>
{% endfor %}
{% if paginate.next %}
<div class="more"><a href="{{ paginate.next.url }}">More</a></div>
{% endif %}
{% endpaginate %}
</div>
JS
$(window).load(function(){
var $container = $('#container');
$container.infinitescroll({
navSelector : '.more', // selector for the paged navigation
nextSelector : '.more a', // selector for the NEXT link (to page 2)
itemSelector : '.item', // 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 ) {
var $newElems = $( newElements );
$container.masonry( 'appended', $newElems, true );
$container.masonry();
}
);
});