3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

cakePHPのpaginateでinfinite scrollを使った無限スクロール

Last updated at Posted at 2017-04-29

ふわっとしつつ、ぐるぐる行きましょう!

今回のお題

cakePHP2でページネート検索をし、結果を表示します
ただし、ページネートバーは使わず、「もっと見る」ボタンを用意し
「もっと見る」ボタンをクリックしてスクロールするように仕上げます
結果はmasonryを使ってタイル状に画像を表示させています

とまあ、いろんなものを盛り込んでいてなんのこっちゃ、ですが、
pinterestをイメージしてもらうとわかりやすいでしょうか

それでは、Worksというテーブルからwork情報を取得し表示する、という体でいきましょう

ぐるぐる

controller

いたって普通にpaginateを行いsetします

$this->paginate = array('limit' => 10, 'order' => array(...));
$works = $this->Paginator->paginate('Works', array(...);
$this->set(compact('works'));

view

viewはこんな感じです
前回書いたjQueryでNow Loadingからふわっと表示させたいを踏襲します

<script src="/js/imagesloaded.pkgd.min.js"></script>
<script src="/js/masonry.pkgd.min.js"></script>
<script src="/js/jquery.infinitescroll.min.js"></script>

<!-- now loading -->
<span class="loading">
    <img src="/img/loading.gif" alt="Now Loading..." />
</span>

<div class="works">
    <?php foreach ($works as $work) : ?>
    <div class="works_item">
        <a href="...">
            <img src="...">
        </a>
    </div>
    <?php endforeach; ?>
    <?php echo $this->Paginator->next('もっと見る', array('tag' => 'p', 'class' => 'read_more'), null, array('style' => 'display:none;')) ?>
</div>

javascript

$(function () {
    // 総ページ数
    var pageCount = <?php echo $this->Paginator->params()["pageCount"] ?>;
    var nowPage = 1;

    $('.works').imagesLoaded(function(){
        $('.works').masonry({
            itemSelector: '.works_item',
            isFitWidth: true,
            isAnimated: true,
            isResizable: true
        });
    });
    $('.works').infinitescroll({
            navSelector  : ".read_more",
            nextSelector : ".read_more a",
            itemSelector : ".works_item",
            loading : {
                img : '...',
                msgText : '...',
                finishedMsg : '',
            },
    },
    function( newElements ) {
        var $newElems = $(newElements);
        $newElems.css({opacity: '0'});
        $newElems.imagesLoaded(function() {
            $('.works').masonry('appended', $newElems, true); 
            if (nowPage < pageCount) {
                $(".read_more").appendTo(".works").delay(300).fadeIn(600);  
            }
            $newElems.css({opacity: '0'}).animate({opacity: '1'}, 1500);
            $('.loading').hide();
        });
        nowPage++;
    });
    
    // クリックでスクロールさせるためinfinitescrollをunbind
    $('.works').infinitescroll('unbind');
    // クリック時の動作
    $('.read_more a').click(function(){
        $('.loading').show();
        $('.works').infinitescroll('retrieve');
        return false;
    });
});

どうでしょう、ぐるぐるできましたでしょうか?
ふわっと表示も引き続きできているかと思います

$('.works').infinitescroll('unbind');
これ以下を削除するとクリックではなくページ下部にスクロールした時点で
次の内容が読み込まれるようになるかと思います

今回はここまでで

ぐるぐる

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?