Yii Framework + Infinite Scroll + Masonry Callback не работает

Я знаю, что InfiniteScroll и Masonry хорошо работают вместе. Но я использую расширение Infinite Scroll Extension для Yii (называемое yiinfinite-scroll) и пробовал применить к нему масонство. 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 в папке расширений на самый новый. Тот же эффект ...

С уважением, Себастьян


infinite-scroll yii jquery-masonry
person Sierra101    schedule 09.03.2013    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Хорошо, я нашел решение. Я размещаю его здесь, если у кого-то такая же проблема:

Я только что изменил класс YiinfiniteScroller из расширения Yiinfinite Scroll Yii и добавил часть обратного вызова для 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 ); 
                    });
                }',

Работает как шарм.

person Sierra101    schedule 09.03.2013