jquery - Isotope では常に最大のアイテムが最初に表示されます

Question

私は優れた jQuery Isotope ライブラリを使って実験してきました。ここに実際の例があります。

私が欲しいのは、アイテムがクリックされて展開されるたびに、グリッドの左上に移動し、本質的にソート順の最初のアイテムになることです。スタックオーバーフローに関するいくつかの同様の質問からコードを試しましたが、うまくいきませんでした。

最初の数回のクリックでは機能する傾向がありますが、その後停止します。何か案は？

私はjQueryを初めて使用するので、本当にばかげたことを見落としている可能性があります。

HTML:

<div id="container">

 <div class="box">
    <a href="#"><img src="./stock/1.png" /></a>
      <div class="more" >
         <p>Text blah blah blah</p>

      </div>
   </div>

jQuery:

            <script>$(window).load(function(){


  var $container = $('#container');

  $container.isotope({
     masonry: {
      columnWidth: 320
    },

    itemSelector: '.box',

    getSortData : {
      width : function( $item ){
        // sort by biggest width first, then by original order
        return -$item.width() + $item.index();
      }
    },
    sortBy : 'width'

  })

     $('.box').click(function(){
    var $this = $(this),
        tileStyle = $this.hasClass('big') ? { width: 300 } : { width: 620 };

    $this.addClass('big').children('.more').show();
    $this.siblings().removeClass('big').children('.more').hide();


    $container.isotope( 'updateSortData', $this ).isotope();

  });


});</script>