2

InfiniteScroll と Masonry がうまく連携することはわかっています。しかし、私は Yii の Infinite Scroll Extension (yiinfinite-scroll と呼ばれる) を使用しており、Masonry を適用しようとしました。Infinite Scroll 自体は完璧に機能し、Masonry 自体も完璧に機能します。しかし、InfiniteScroll が新しい一連の画像を読み込もうとした後 (私は画像ページを持っています)、InfiniteScroll のコールバック部分は起動していないようです。これは、新しく追加された要素には石積みのコードが含まれておらず、背後に表示されるためです。最初に見えるアイテム。(このバグが頻繁に報告されることは知っていますが、これまでに見つけた解決策はうまくいきませんでした)。

写真を表示するための私の構造は次のようになります。

<div class="items">
 <div class="pic">...</pic>
 <div class="pic">...</pic>
...
</div>

最初のページ読み込みは次のようになります

<div class="items masonry" style="...">
   <div class="pic masonry-brick" ...></div>
   <div class="pic masonry-brick" ...></div>
   ...
</div> // everything's fine, masonry is injected into the code

無限スクロールが動的に新しい画像をロードした後、これらは次のようになります。

<div class="items masonry" ...></div>
   <div class="pic masonry-brick" ...></div>
   ...
   // appended pics:
   <div class="pic"></div>
   <div class="pic"></div>
</div> // so no masonry functionality was applied

私のメーソンリーコード:

    $(function (){  
        var $container = $('.items');
        $container.imagesLoaded(function(){
          $container.masonry({
            itemSelector: '.pic',
            columnWidth: 405
        });
      });
   });

   $container.infinitescroll({
        // normally, the options are found here. but as I use infinitescroll as a Yii extension, the plugin is already initiated with options
        }
    },
    // 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 ); 
      });
  });  
  });

また、拡張フォルダー内の現在の InfiniteScroll-min.js ファイルを最新のものにコピーして置き換えようとしました。同じ効果...

よろしく、 セバスチャン

4

1 に答える 1

5

さて、私は解決策を見つけました。他の誰かが同じ問題を抱えている場合は、ここに投稿します。

Yiinfinite Scroll Yii 拡張機能の YiinfiniteScroller クラスを変更し、欠落していた Infinite Scroll のコールバック部分を追加しました。

 private function createInfiniteScrollScript() {
    Yii::app()->clientScript->registerScript(
            uniqid(),
            "$('{$this->contentSelector}').infinitescroll(".$this->buildInifiniteScrollOptions().", ".$this->callback.");"
    );
}

クラスの最初に、public $callback; という行を追加しました。後でメソッドで使用します。

次に、次のように、追加のオプション コールバックを使用してウィジェットを呼び出すことができます。

'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 theyre ready
                      $newElems.animate({ opacity: 1 });
                      $(".items").masonry( "appended", $newElems, true ); 
                    });
                }',

魅力のように動作します。

于 2013-03-09T22:48:06.837 に答える