tumblr maçonnerie + infini défilement chevauchement des postes en dépit de l'aide de desandro et de nouvelles jquery

Je suis nouveau sur le javascript et des trucs et maintenant, j'ai un problème frustrant avec la maçonnerie et de l'infini défilement sur tumblr.
J'ai lu presque tous les forum questions au sujet de ces questions, mais rien n'a résolu mon problème.

Donc, j'ai un blog tumblr (http://jessman5.tumblr.com) et en dépit de l'aide:

et ce code:

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

les postes sont superposées quand il s'agit de charger les messages plus anciens.
Safari est de le faire pendant un certain temps, mais Chrome et Firefox sont complètement perdus.

J'ai essayé d'inclure ceci:

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

et ce:

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

et (ressentie) des centaines d'autres versions de code...
rien de tout cela fonctionne pour moi.

J'espère que quelqu'un peut m'aider.
Je suis frustré..

InformationsquelleAutor Jessman5 | 2013-01-22
  1. 3

    Lorsque vous essayez de déboguer le code, toujours vérifier la console d'erreurs. La console etats ceci:

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

    Je peux voir que vous êtes en train d'initialiser la maçonnerie sur le window.load méthode, cependant, votre infinitescroll code est tir sur le document prêt, qui se déclenche avant window.load. C'est pourquoi l'erreur se produit toujours.

    Essayer de l'initialisation à la fois infinitescroll et de la maçonnerie dans la document.ready méthode, ou les deux à la window.load méthode, et vous devriez l'obtenir pour fonctionner. Exemple:

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

    $('#container').infinitescroll({
        //etc
    });
});
    • merci beaucoup! 🙂 J'ai résolu mon Problème. Je vais poster le code final quand je suis en mesure de répondre à ma propre question plus tard.
    • 2 choses à noter - réponses sur un débordement de pile sont là pour vous aider d'autres personnes aussi bien que vous. Si vous n'avez pas besoin de unaccept réponses et de poster votre code de travail, parce que c'est hors de propos à d'autres personnes qui ont le même problème avec un code différent. Ce qu'il faut savoir sur le problème et comment le résoudre c'est ce que ma réponse explique. Aussi, soyez conscient que unaccepting réponses pénalise le répondeur (aka moi), donc si vous avez l'intention de répondre à votre propre question, veuillez ne pas les accepter/unnaccept autres réponses 🙂
    InformationsquelleAutor Christian Varga
  2. 1

    Bon voici le code qui fonctionne:

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

    J'ai juste eu à le retourner, à droite? haha 😀

    InformationsquelleAutor Jessman5