2

さて、私はMasonryをinfinite-scrollで動作させようとしています.公式のappended方法（http://desandro.github.io/masonry/demos/infinite-scroll.html）を見つけて、コードで動作させようとしました. $しかし、 toの一部を変更する必要があり、現在は石積みとして機能していますが、無限スクロールはまだ機能していません。コードからjQuery変更するドル記号を忘れたのではないかと思っています。助けてくださいjQuery

<script >
  jQuery(function(){

    var $container = jQuery('ul.products');

    $container.imagesLoaded(function(){
      $container.masonry({
        itemSelector: 'li.product',
        columnWidth : 295,
    isFitWidth: true,
        gutterWidth : 2
      });
    });

    $container.infinitescroll({
      navSelector  : '#page-nav-woo',    // selector for the paged navigation 
      nextSelector : '.next',  // selector for the NEXT link (to page 2)
      itemSelector : 'li.product',     // 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 = jQuery( 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 ); 
        });
      }
    );

  });
</script>
4

2 に答える 2

2

私の問題の解決策は次のとおりです。

1.i wp-plugin をインストールしました

2.for コールバック セクションが追加されました:

 var $newElems = jQuery( 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.append( $newElems ).masonry( 'appended', $newElems, true );
        });

3.behavior: 石積み

そして、それは魅力のように機能します！皆さんありがとう！

于 2013-10-31T15:51:19.840 に答える
0

または、スクリプトをクロージャーでラップすることもできます。

(function($) {
    // i can use $ instead of jQuery
} (jQuery));

また

(function(jQuery) {
    // i can use jQuery instead of $
} ($));
于 2013-10-31T15:54:23.960 に答える