За последние 24 часа нас посетили 20948 программистов и 1035 роботов. Сейчас ищут 518 программистов ...

Yii2 infinitescroll + masonry

Тема в разделе "Yii", создана пользователем tenderwinner, 28 янв 2018.

  1. tenderwinner

    tenderwinner Новичок

    С нами с:
    28 янв 2018
    Сообщения:
    2
    Симпатии:
    0
    Всем привет,
    пытаюсь сделать отображение как на brainyquote.com, чтобы элементы подгружались через аджакс и при этом применялась masonry.

    пробовал расширения:
    kop\y2sp\ScrollPager
    nirvana\infinitescroll\InfiniteScrollPager

    в 1м получилось сделать подгрузку, но масонри не применяется
    во вром вообще всё глухо.

    Есть у кого нибудь подходящий кусок кода или с использованием расширений или без них?
     
  2. tenderwinner

    tenderwinner Новичок

    С нами с:
    28 янв 2018
    Сообщения:
    2
    Симпатии:
    0
    Решил в итоге сделать без виджетов, но... не меняется страница при переходе на следующую, т.е. есть ссылка на 2 страницу и инфинит скролл мне каждый раз аппендит 2ую страницу:

    PHP:
    1. $this->registerJs('var $grid = $(\'.grid\').masonry({
    2. itemSelector: \'none\',
    3. columnWidth: 300,
    4. gutter: 5,
    5. visibleStyle: { transform: \'translateY(0)\', opacity: 1 },
    6. hiddenStyle: { transform: \'translateY(100px)\', opacity: 0 },
    7. });
    Код (Javascript):
    1. var msnry = $grid.data(\'masonry\');
    2. $grid.imagesLoaded( function() {
    3. $grid.masonry( \'option\', { itemSelector: \'.grid-item\' });
    4.  var $items = $grid.find(\'.grid-item\');
    5.  $grid.masonry( \'appended\', $items );
    6. });
    7.  
    8. $grid.infiniteScroll({
    9. path: \'.next1\',
    10. append: \'.grid-item\',
    11. outlayer: msnry,
    12. hideNav: \'.pagination\',
    13. history: false,
    14. checkLastPage: true
    15. })');
    PHP:
    1. <?php
    2. Pjax::begin(['options' => ['id' => 'ajax-grid', 'timeout' => 3000], 'enablePushState' => false, 'enableReplaceState' => false, 'timeout' => 10000]);
    3. echo ListView::widget([
    4.     'dataProvider' => $dataProvider,
    5.     'layout' => '<div class="grid">{items}</div><div class="pagination">{pager}</div>',
    6.     'itemOptions' => ['class' => 'grid-item'],
    7.     'itemView' => '/quotes/_single_item_view',
    8.     'options' => ['class' => 'qwe',
    9.         'id' => 'qwe'
    10.     ],
    11.     'pager' => [
    12.         'linkOptions' => [
    13.           'class' => 'next1',
    14.         ],
    15.         'disableCurrentPageButton' => true,
    16.         'maxButtonCount' => 0,
    17.         //'nextPageCssClass' => 'next',
    18.         //'$disabledPageCssClass' => true,
    19.     ]
    20. ]);
    21. Pjax::end();
     
    #2 tenderwinner, 30 янв 2018
    Последнее редактирование модератором: 30 янв 2018