PHP code example of klintlili / yii2-infinitescroll

    
        
<?php
require_once('vendor/autoload.php');

/* Start to develop here. Best regards https://php-download.com/ */

    

klintlili / yii2-infinitescroll example snippets

    echo ListView::widget([
        'dataProvider' => $dataProvider,
        'itemView' => '_item',//子视图
        'layout' => "{summary}\n<div class='grid are-images-unloaded'><div class='grid__col-sizer'></div><div class='grid__gutter-sizer'></div>{items}</div>\n<div class='pager'>{pager}</div>",
        'itemOptions' => ['tag' => false],
        'pager' => [
            'class' => \yiidoc\infinitescroll\InfiniteScrollWidget::class,
            'contentSelector' => '.grid',
            'pluginOptions' => [
                'path' => new \yii\web\JsExpression('setPath'),
                'append' => '.grid__item',
                'outlayer' => new \yii\web\JsExpression('msnry'),
                'status' => '.page-load-status',
                'history' => false,
                'debug' => true
            ],
            'clientEvents' => [
                'load' => 'function( response, path ) {
                    console.log(location.pathname)
                    console.log(infScrollIns.pageIndex);
                }',
                'history' => new \yii\web\JsExpression('function() {
                    console.log(520,location.pathname);
                }'),
           ]
        ],
     ]);

    

    $customFilter = <<<EOF
        function setPath() {
            var currentPage = ($currenPage+1);    
            var next = currentPage+this.pageIndex;
            if(next <= $pageCount){
                return '/test/index2?page='+ next +'&per-page=15';
            }
    }
    EOF;
    $this->registerJs($customFilter, \yii\web\View::POS_END);
    //-------------------------------------//

    var grid = document.querySelector(\'.grid\');

    var msnry = new Masonry( grid, {
      itemSelector: \'none\', // select none at first
      columnWidth: \'.grid__col-sizer\',
      gutter: \'.grid__gutter-sizer\',
      percentPosition: true,
      stagger: 30,
      // nicer reveal transition
      visibleStyle: { transform: \'translateY(0)\', opacity: 1 },
      hiddenStyle: { transform: \'translateY(100px)\', opacity: 0 },
    });


    // initial items reveal
    imagesLoaded( grid, function() {
      grid.classList.remove(\'are-images-unloaded\');
      msnry.options.itemSelector = \'.grid__item\';
      var items = grid.querySelectorAll(\'.grid__item\');
      msnry.appended( items );
    });

    //-------------------------------------//
    ', \yii\web\View::POS_END);