2

我知道 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 文件复制并替换为最新的文件。一样的效果...

最好的问候，塞巴斯蒂安

4

1 回答 1

5

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

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

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

在课程的开头，我添加了 public $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 ); 
                    });
                }',

像魅力一样工作。

于 2013-03-09T22:48:06.837 回答