Yii框架+无限滚动+Masonry回调不起作用

Question

我知道 InfiniteScroll 和 Masonry 可以很好地协同工作。但我正在使用 Yii 的无限滚动扩展(称为 yiinfinite-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)$回调； 稍后在该方法中使用它。

然后您可以使用附加选项回调来调用小部件，例如如下所示:

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

就像魅力一样。