8

私はJQuery組積造を使用してきましたが、今は無限スクロールを追加しています。ほぼすべての石積みの「レンガ」に画像があり、無限スクロールを使用する前は、画像は正常に読み込まれ、すべてが素晴らしかったです。無限スクロール用のJavaScriptの次の部分を追加し、その中にimagesLoadedメソッドを追加しましたが、新しいブリックを追加すると、すべてが上に積み上げられて表示されます。私の仮定では、無限スクロールコールバックにimagesLoadedメソッドを適切に追加していませんが、エラーを見つけることができませんでした。これがコードです

<script type="text/javascript">
    $(function(){
        var $container = $('#container');
        $container.imagesLoaded(function(){
          $container.masonry({
            itemSelector : '.tile',
            columnWidth : 240
          });
        });


    var $container = $('#container');
    $container.infinitescroll({
        navSelector  : ".flickr_pagination",            
                       // selector for the paged navigation (it will be hidden)
        nextSelector : "a.next_page",    
                       // selector for the NEXT link (to page 2)
        itemSelector : "div.tile"          
                       // selector for all items you'll retrieve
      },
      // trigger Masonry as a callback
      function( newElements ) {
        var $newElems = $( newElements );

        $container.imagesLoaded(function() {
            masonry( 'appended', $newElems );
        });
      }
    );
    });
</script>

最初のJQuery組積造呼び出しは正常に機能し、変更されていません。問題があると思われる2番目の部分です。ヘルプをありがとう、そしてあなたがより多くの情報を必要とするならば私に知らせてください。

4

1 に答える 1

12

これが答えです

$(function(){

        var $container = $('#container');
        $container.imagesLoaded(function(){
          $container.masonry({
            itemSelector : '.tile',
            columnWidth : 240
          });
        });

    $container.infinitescroll({
          navSelector  : '.flickr_pagination',    // selector for the paged navigation 
          nextSelector : 'a.next_page',  // selector for the NEXT link (to page 2)
          itemSelector : '.tile',     // selector for all items you'll retrieve
          loading: {
              finishedMsg: 'No more pages to load.',
              img: 'http://i.imgur.com/6RMhx.gif'
            }
          },
          // trigger Masonry as a callback
          function( newElements ) {
            // hide new items while they are loading
            var $newElems = $( newElements ).css({ opacity: 0 });
            // ensure that images load before adding to masonry layout
            $newElems.imagesLoaded(function(){
              // show elems now they're ready
              $newElems.animate({ opacity: 1 });
              $container.masonry( 'appended', $newElems, true ); 
            });
          }
        );
    });

問題は、無限スクロールコールバック関数の$ containerで.imagesLoaded（）を呼び出していたので、$newElementsで呼び出す必要があったことです。

于 2012-03-23T21:51:11.127 に答える