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

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

今回のお題

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');
これ以下を削除するとクリックではなくページ下部にスクロールした時点で
次の内容が読み込まれるようになるかと思います

今回はここまでで

ぐるぐる