tumblr石工+无限滚动重叠的帖子，尽管使用了desandro和new jQuery [英] tumblr masonry + infinite scrolling overlapping posts despite using desandro and new jquery

问题描述

我对javascript和其他东西不熟悉，现在我在tumblr上的砌体和无限滚动方面遇到了令人沮丧的问题. 我已经阅读了几乎所有关于这些问题的论坛问题，但没有任何解决方案能够解决我的问题.

I am new to javascript and stuff and now I have a frustrating issue with masonry and infinite scroll on tumblr. I have read nearly all the forum questions about those issues but nothing solved my problem.

因此，我有一个tumblr博客(http://jessman5.tumblr.com)，尽管使用了:

So, I have a tumblr blog (http://jessman5.tumblr.com) and despite of using:

• //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

• //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完全消失了.

the posts are overlapping when it comes to load older posts. Safari is doing it well for a while but Chrome and Firefox are completely lost.

我尝试包含此内容:

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

和这个:

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

和(感觉)数百种其他版本的代码... 这对我没有任何帮助.

and (feels like) hundreds of other versions of code... nothing of this is working for me.

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

I hope anyone can help me. I'm frustrated..

推荐答案

好的，下面是适用的代码:

OKay here is the code which works:

<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

I just had to flip it, right? haha :D

这篇关于tumblr石工+无限滚动重叠的帖子，尽管使用了desandro和new jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！