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

尝试调试代码时，总是检查控制台是否有错误。控制台说明了这一点：

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

好的，这是有效的代码：

<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

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

2 个答案: