著者アーカイブ aoki

著者:aoki

jQuery+masonry+autopager で躓く。isAnimated が false にならない！？

久々に頭が痛くなるほど躓きました。
とあるサイトで jQuery ＋ masonry ＋ autopager を使い、pinterest風のタイル表示且つページ遷移のしない読み込み＋レスポンシブ対応を行っていました。
コードはこんな感じ

$(document).ready(function() {
    var $container = $('#container');
    $container.imagesLoaded(function() {
  　　  $container.masonry({
      　　  isAnimated : false,
        　　columnWidth: '.thumb',
        　　itemSelector: '.thumb'
    　　});
    });

    var maxpage = 10;
    $('#loading').css('display', 'none');
    $.autopager({
        content: '.grid',
        link: '#next a',
        autoLoad: false,
    
        start: function(current, next){
          $('#loading').css('display', 'block');
          $('#next a').css('display', 'none');
        },

        load: function(current, next){
            $container.imagesLoaded(function() {
                $container.masonry('reloadItems');
                $container.masonry('layout');
            
                $('#loading').css('display', 'none');
                $('#next a').css('display', 'block');
                if( current.page >= maxpage ){
                    $('#next a').hide();す
                }
            });
        }
    });
    $('#next a').click(function(){
        $.autopager('load');
        return false;
    });
});

これで動いてはいたのですが、autopagerで読み込んだ時に読み込んだ要素をレイアウトしなおす関係で上からレイアウトが降ってくるような動きになってしまっていました。
何とかこれを直したいと試行錯誤をしたのですがうまくいかず・・・
そもそも isAnimated が false と指定しているのにアニメーションされてしまうのはなぜ？という事で調べたところ重大なことが分かりました。
isAnimated オプションは昔のバージョンのオプションで最新の物では既に廃止されているオプションという事でした。
それは動かないわ。

という事で対応できるオプションを探したところ、transitionDuration を設定することでアニメーションも解除されうまく表示されるようになりました。

$(document).ready(function() {
    var $container = $('#container');
    $container.imagesLoaded(function() {
  　　  $container.masonry({
      　　  transitionDuration: 0,
        　　columnWidth: '.thumb',
        　　itemSelector: '.thumb'
    　　});
    });

    var maxpage = 10;
    $('#loading').css('display', 'none');
    $.autopager({
        content: '.grid',
        link: '#next a',
        autoLoad: false,
    
        start: function(current, next){
          $('#loading').css('display', 'block');
          $('#next a').css('display', 'none');
        },

        load: function(current, next){
            $container.imagesLoaded(function() {
                $container.masonry('reloadItems');
                $container.masonry('layout');
            
                $('#loading').css('display', 'none');
                $('#next a').css('display', 'block');
                if( current.page >= maxpage ){
                    $('#next a').hide();す
                }
            });
        }
    });
    $('#next a').click(function(){
        $.autopager('load');
        return false;
    });
});

そもそも古い masonry のページをずっと見ていたことが一番の原因ですね。

現在のバージョン（v3）のページはこちらです。
https://masonry.desandro.com/

古いバージョン（v2）はこちら
https://masonry.desandro.com/v2/