isotope.jsとshuffle.jsを使用したところ、ソート後のレイアウトが崩れます。

Question

###前提・実現したいこと
isotope.jsとshuffle.jsを使用して、ソートとアニメーションの機能を持った箇所を制作しています。
一つ目の要素だけ他の要素の縦横2倍の大きさに設定しています。

ページを表示させたときはきちんとつまって表示されるのですが、ソート後に一つ目の要素の間隔で並んでしまうようです。ソート後にもつめて表示させるにはどうしたらよいでしょうか。

###発生している問題・エラーメッセージ

エラーメッセージは特に表示されていません。

###該当のソースコード
html

<ul class="itembox main" id="itemList"> <li class="border01 bigbox element" data-groups='["share"]'> <h2 class="bgcolor01">要素１</h2> <img src="images/top_info.png" width="340px" alt=""/> ※この要素のみ他要素と違い縦横二倍 要素幅340px </li> <li class="border01 smallbox element" data-groups='["share"]'> <img src="images/top_rule.png" alt=""/> <h3>要素2　※要素幅172px</h3> </li> <li class="border01 smallbox element" data-groups='["share"]'> <img src="images/top_training.png" alt=""/> <h3>>要素3　※要素幅172px</h3> </li> <ul>

js

jQuery(function($){
var $container = $('#itemList'),filters = {};
$container.isotope({
itemSelector : '.element',
layoutMode : 'masonry',
masonry: {
columnWidth: 172,
rowHeight: 156
}
});

});

###試したこと
要素のボーダー指定、英語サイトでのレイアウトオプション等を確認しました。

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報