Yii框架+无限滚动+砌体回调无法正常工作

Question

我知道InfiniteScroll和Masonry合作得很好.但我正在使用Yii的无限滚动扩展(称为yiinfinite-scroll)并尝试在其上应用砌体.无限卷轴本身也很完美,砌体本身也是如此.但是在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.");"
    );
}

在课程开始时我添加了行$ callback; 稍后在方法中使用它.

然后你可以用一个额外的选项回调来调用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 ); 
                    });
                }',

像魅力一样工作.