1

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

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

这个代码：

<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;
            }
        });
    });

和（感觉像）数百个其他版本的代码......这对我没有任何作用。

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

4

2 回答 2

3

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

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

我可以看到您正在尝试在该window.load方法上初始化砌体，但是您的无限滚动代码在文档就绪时触发，该文档在 window.load. 这就是错误仍然发生的原因。

尝试在方法中同时初始化无限滚动和砖石document.ready，或者在方法中同时初始化window.load，你应该让它工作。例子：

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

    $('#container').infinitescroll({
        // etc
    });
});
于 2013-01-22T14:11:12.457 回答
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

于 2013-01-23T09:45:13.640 回答