尽管使用了desandro和新的jquery，tumblr砌体+无限滚动重叠的post

我是javascript和东西的新手，现在我对tumblr上的砌体和无限滚动有一个令人沮丧的问题。 我几乎阅读了有关这些问题的所有论坛问题，但没有解决我的问题。

所以，我有一个tumblr博客（http://jessman5.tumblr.com），尽管使用：

• //ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
• http://masonry.desandro.com/jquery.masonry.min.js
• http://masonry.desandro.com/js/jquery.infinitescroll.min.js

而这段代码：

 $(function(){ var container = $('#container'); container.infinitescroll({ navSelector : '.pagination', nextSelector : '.pagination a', itemSelector : '.post', loading: { finishedMsg: 'No more pages to load.', img: 'http://sofzh.miximages.com/jquery/6RMhx.gif' } }, function( newElements ) { var newElems = $( newElements ); newElems.css({ opacity: 0 }); newElems.animate({ opacity: 1 }); container.masonry( 'appended', newElems); } ); container.imagesLoaded(function(){ container.masonry({ itemSelector: '.post' }); }) });  

在加载旧post时，post是重叠的。 Safari正在做好一段时间，但Chrome和Firefox完全丢失了。

我试图包括这个：

 $(window).load(function(){ $('#container').masonry({ // options... }); }); 

还有这个：

 container.imagesLoaded(function () { container.masonry({ columnWidth: function (containerWidth) { return containerWidth / 100; } }); }); 

和（感觉）数百个其他版本的代码……这对我来说没什么用。

我希望有人能帮助我。 我很沮丧..

Answer 1

尝试调试代码时，请始终检查控制台是否存在错误。 控制台说明了这一点：

 cannot call methods on masonry prior to initialization; attempted to call method 'appended' 

我可以看到你正在尝试在window.load方法上初始化砌体，但是你的infinitescroll代码在文件准备就绪时触发， 在 window.load 之前触发。 这就是错误仍然发生的原因。

尝试在document.ready方法中初始化infinitescroll和masonry，或者在window.load方法中初始化，你应该让它工作。 例：

 $(function() { $('#container').masonry({ // options }); $('#container').infinitescroll({ // etc }); }); 

Answer 2

好的，这是有效的代码：

我只需要翻转它，对吗？ 哈哈：D