プラグインMansonryの動きに関して

Question

###プラグインMansonryの動きに関して
以下、addItemsの関数内の最後の方にあるif内でmansonryにて再配置している意味が分かりません。
if文を抜いても動くと思いましたが動きません。
ご教授頂けたら幸いです。

以下分からない箇所を抜粋した部分です。

if(filter){
          $container.masonry(); //フィルタリング時は再配置
        }

---

以下コード全体になります。

$(function(){
  let $container = $('#gallery'),
      $loadMoreButton = $('#load-more'), //追加ボタン
      $filter = $('#gallery-filter'), //フィルタリングのフォーム
      addItemCount = 16, //一度に表示するアイテム数
      added = 0, //表示済みのアイテム数
      allData = [], //全てのJSONデータ
      filteredData = []; //フィルタリングされたJSONデータ

  $container.masonry({
    columnWidth: 230,
    gutter: 10,
    itemSelector: '.gallery-item'
  });

  //JSONを取得し関数実行(関数の引数(JSONのデータ)は外に定義している関数に)
  $.getJSON('./data/content.json', initGallery);

  function initGallery(data){
    //dataはこの関数内でしか使用できない為、外で宣言したallDataに代入して使い回せるように
    allData = data;

    //フィルタリング保持のために代入
    filteredData = allData;

    addItems(); //最初のアイテムを表示するための関数

    $loadMoreButton.on('click', addItems); //クリックされたら追加で表示

    //フィルターのラジオボタンが変更されたらフィルタリング実行
    $filter.on('change', 'input[type="radio"]', filterItems);

    function addItems(filter){
      let elements = []; //masonryで使用するための空の配列を用意

      //sliceで任意の切り出した配列を代入(第二引数に入る整数の1つ前までになるので注意)
      let slicedData = filteredData.slice(added, added + addItemCount);

      $.each(slicedData, function(i, item){
        let itemHTML = '<li class="gallery-item is-loading">' +
                          '<a href="' + item.images.large + '">' +
                            '<img src="' + item.images.thumb + '" alt="">' +
                              '<span class="caption">' +
                              '<span class="inner">' +
                                '<b class="title">' + item.title + '</b>' +
                                  '<time class="date" datatime="' + item.date + '">' +
                                    item.date.replace(/-0?/g, '/') +
                                    //replaceで検索して置き換え
                                  '</time>' +
                              '</span>' +
                              '</span>' +
                          '</a>' +
                        '</li>';
        elements.push($(itemHTML).get(0));
      });

      $container.append(elements).imagesLoaded(function(){
        $(elements).removeClass('is-loading');
        $container.masonry('appended', elements);
//以下のifの中の動きが分かりません
        if(filter){
          $container.masonry(); //フィルタリング時は再配置
        }
      });
      //addedの更新(slicedDataの配列要素数をプラス)
      added += slicedData.length;

      //JSONがすべて出し終わっていたら追加buttonを消す
      if(added < filteredData.length){
        $loadMoreButton.show();
      }else{
        $loadMoreButton.hide();
      }
    };

    //input[radio]が操作された時
    function filterItems(){
      let key = $(this).val();  //操作があったradioのvalueを変数に代入

      //現在表示されているアイテムを一旦リセットする必要がある為
      //masonryによって追加/レイアウトされた要素を取得して変数に代入
      let masonryItems = $container.masonry('getItemElements');

      //そしてmasonryによって削除
      $container.masonry('remove', masonryItems);

      //さらにフィルタリング済みのデータ/追加済みアイテムのデータもリセット
      filteredData = [];
      added = 0;

      if(key === 'all'){
        filteredData = allData; //key(選択されたvalue)がallなら
      }else{
        //違うならallDataを対象に条件関数にてkeyと同じ値の要素を抽出して変数に代入
        filteredData = $.grep(allData, function(item){
          return item.category === key;
        });
      };

      addItems(true); //addItem内のifにtrueを渡すため
    }
  };
});