tumblr masonry +无限滚动重叠的帖子，尽管使用desandro和新的jquery

Question

我是新来的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

和验证码：

<script> 
$(function(){ 
var container = $('#container'); 

    container.infinitescroll({ 
      navSelector : '.pagination',  
      nextSelector : '.pagination a', 
      itemSelector : '.post', 
      loading: { 
       finishedMsg: 'No more pages to load.', 
       img: 'http://i.imgur.com/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' 
     }); 
    }) 
}); 
</script> 

帖子在加载旧帖子时重叠。 Safari已经做得很好，但Chrome和Firefox完全丢失。

我想这包括：

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

这：

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

和（感觉）数百码其他版本的... 什么的，这是为我工作。

我希望任何人都可以帮助我。 我很沮丧..

Answer 1

还好这里是工作的代码：

<script type="text/javascript"> 
$(function(){ 
var container = $('#container'); 

container.imagesLoaded(function(){ 
    container.masonry({ 
     itemSelector : '.post' 
    }); 
}); 

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

我刚翻了吧？哈哈：D

Answer 2

当试图调试代码时，总是检查控制台是否有错误。控制台状态这样的：

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

我可以看到你正在试图初始化的window.load方法砌筑，但是你infinitescroll代码开火文件准备好，这window.load之前触发。这就是为什么错误仍然存​​在。

尝试在document.ready方法中初始化infinitescroll和masonry，或者在window.load方法中初始化infinitescroll和masonry，并且应该使其运行。例如：

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

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