Yii Framework + Infinite Scroll + Masonry 回调不起作用

Question

我知道 InfiniteScroll 和 Masonry 可以很好地协同工作。但我正在使用 Yii 的无限滚动扩展(称为 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 文件复制并替换为最新的文件。同样的效果...

最好的问候，塞巴斯蒂安

Answer 1

好的，我找到了解决方案。如果其他人有同样的问题，我会在这里发布:

我刚刚修改了 Yiinfinite Scroll Yii Extension 中的 YiinfiniteScroller 类，并添加了缺少的 Infinite Scroll 的回调部分:

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

在类(class)开始时我添加了这行 公共(public)$回调；稍后在方法中使用它。

然后您可以使用附加选项回调来调用 Widget，例如:

'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 ); 
                    });
                }',

像魅力一样工作。