Shuffle.jsのハマりどころ

Shuffle.jsというとてもかっこいいライブラリがあります。
しかし、実際に使うにあたってハマりどころがあったので、メモしておきます。

以下のような環境を前提とします。

$('#area').shuffle({
  itemSelector: '.entry'
});

 

枠がずれる

Shuffle.jsを設定した要素に対して各内部要素がちゃんと配置されない場合。

#areaに対し、

#area {
  position: relative;
}

と設定することで配置を正常にすることができるかもしれません。

 

配置がおかしくなる

Shuffle.jsを設定した要素に対して、
各内部要素の高さやmarginが正確に計算されず、要素間に隙間ができる。

$(window).load(function(){
  $('#area').shuffle('shuffle', function($val){
    return true;
  });
});

とwindow.onloadで実行することによって、各要素のサイズが正確に計算し直されるかもしれません。

 

ページ下に謎の余白が現れる

Shuffle.jsで要素をfilteringしたところ、ページの下部に余白が現れる場合。

#areaに対し、

#area {
  overflow: hidden;
}

と設定することで余白を消すことができるかもしれません。