title: how to reload masonry on button click
body: <p>My <strong>html code</strong> to display records using ng-repeat on document ready using ajax call:</p>
  
  <pre><code>&lt;ul class="list-no-infinity pinterest-items clearfix" id="container"&gt;
    {% csrf_token %}
    &lt;li ng-show="mealPlansExists" class="masonryImage item" ng-repeat="(key, mealplan) in mealplans" style=""&gt;
      &lt;article class="post-article"&gt;
        &lt;figure class="figure-hubba"&gt;
          &lt;img ng-show="mealplan.mp_image" class="img-responsive" src="{$mealplan.mp_image | filterProfImgUrl $}" alt="tools you need for better meal planning"&gt;
          &lt;img ng-hide="mealplan.mp_image" class="img-responsive" alt="tools you need for better meal planning" src="{% static 'mpb/assets/img/mp_no.jpg' %}"&gt;
          &lt;div class="overlay overlay-black-70"&gt;&lt;/div&gt;
          &lt;figcaption class="figcaption"&gt;
            &lt;a href="/mpb/mealplandetails/{$ mealplan.id$}/" class="icon"&gt;View&lt;/a&gt;
          &lt;/figcaption&gt;
        &lt;/figure&gt;
        &lt;header class="post-header clearfix"&gt;
          &lt;h1 title="{$ mealplan.mp_name$}"&gt;{$ mealplan.mp_name | cut:true:25:' ...'$}&lt;/h1&gt;
          &lt;div class="small post-author"&gt;
            By: {$ mealplan.mp_by $}
          &lt;/div&gt;
          &lt;!-- /.post-author --&gt;
          &lt;div class="post-date"&gt;
            {$ mealplan.mp_created_at | date: 'M d, yyyy' $} {$ mealplan.mp_date$}
          &lt;/div&gt;
        &lt;/header&gt;
        &lt;p title="{$ mealplan.desc $}"&gt;{$ mealplan.desc | cut:true:38:' ...'$}&lt;/p&gt;
        &lt;footer&gt;
          &lt;a ng-if="mealplan.subscribed == 1" class="btn btn-success btn-block" href=""&gt;Open&lt;/a&gt;
          &lt;a ng-if="mealplan.subscribed == 0" class="btn btn-success btn-block" href="#" ng-click="subScribeMealplan(mealplan.id)"&gt;Start Cooking&lt;/a&gt;
          &lt;!-- Rating --&gt;
          &lt;div ng-if="mealplan.avg_rating&gt;=1" ng-init="rating = mealplan.avg_rating" class="post-icons"&gt;
            &lt;a href="#"&gt;(&lt;span class="mp_red"&gt;{$mealplan.subscriber_count$}&lt;/span&gt;) Cooking &lt;/a&gt;
            &lt;div ng-click="up" class="stars pull-right" rating-count="mealplan.rating_count" class="star-rating" star-rating rating-value="rating" data-max="5"&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div ng-if="mealplan.avg_rating == 0" ng-init="rating = star.rating -1" class="post-icons"&gt;
            &lt;a href="javascript:;"&gt;(&lt;span class="mp_red"&gt;{$mealplan.subscriber_count$}&lt;/span&gt;) Cooking &lt;/a&gt;
            &lt;div class="stars pull-right" rating-count="0" class="star-rating" star-rating rating-value="rating" data-max="5"&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/footer&gt;
      &lt;/article&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>Angular code for ajax call</strong> and loading data in ng-repeat:</p>
  
  <pre><code>$http.post('/mpb/getallmealplans/', $scope.mpPostData)
    .success(function(response) {
      if (response != 0) {
        $('.item').masonry('destroy');
  
        if (response.is_more_records) {
          $scope.is_more_records = true;
        }
        $scope.mealplans = response.mealplans.details;
        $scope.mpPostData.mp_offset = $scope.mpPostData.mp_offset + $scope.mpPostData.mp_limit;
        $scope.mpPostData.mp_limit = $scope.mpPostData.mp_limit + $scope.mpPostData.mp_limit;
        $scope.mealPlansExists = true;
  
  
      } else {
        $('section#bottomBar.bottom-bar div.container').addClass("footer-no-results");
        $scope.is_more_records = false;
        $scope.mealPlansExists = false;
      }
    });
  </code></pre>
  
  <p>I am using masonry to arrange different sized li tags on the page. 
  I am using jquery masonry whereas I am using angular js ng-repeat to add items to the page on document.ready.</p>
  
  <p>Masonry worked well for ng-repeat as used in below <strong>jquery code</strong>:</p>
  
  <pre><code>$(function() {
    setTimeout(function() {
      var $container = $('#container');
  
      $container.imagesLoaded(function() {
        $container.masonry({
          itemSelector: '.masonryImage'
        });
      });
    }, 2000);
  });
  </code></pre>
  
  <p>Later I want to add more items on button click. This again needs to be done using ng-repeat and ajax call using <strong>angular js</strong>:</p>
  
  <pre><code>$http.post('/mpb/abcd/', $scope.mpPostData)
    .success(function(response) {
      if (response != 0) {
        angular.forEach(response.mealplans.details, function(value, key) {
          $scope.mealplans.push({
            'mp_name': value.mp_name,
            'desc': value.desc,
            'mp_by': value.mp_by,
            'mp_created_at': value.mp_created_at,
            'mp_image': value.mp_image,
            'mp_name': value.mp_name,
            'id': value.id,
            'avg_rating': value.avg_rating,
            'subscriber_count': value.subscriber_count,
            'rating_count': value.rating_count,
            'subscribed': value.subscribed
          });
          $scope.rating_count = value.rating_count;
        });
  
        if (response.is_more_records) {
          $scope.is_more_records = true;
        }
        $scope.mpPostData.mp_offset = $scope.mpPostData.mp_offset + $scope.mpPostData.orig_limit;
        $scope.mpPostData.mp_limit = $scope.mpPostData.mp_limit + $scope.mpPostData.orig_limit;
  
  
        masonryUpdate(); //jquery function
      } else {
        $scope.is_more_records = false;
      }
    });
  };
  </code></pre>
  
  <p>but here the masonry stops working and neither does Li tags arranges. I want to reload masonry on button click.
  I tried below code reload masonry using <strong>jquery code</strong>:</p>
  
  <pre><code>function masonryUpdate() {
      alert("masonry updated");
      setTimeout(function() {
          $('#container').masonry();
      }, 10000);
  }
  </code></pre>
  
  <p>But above code does not reload masonry.
  I also used below CSS:</p>
  
  <pre><code>/****************** MASONRY***************/ #
  container {
    width: 1200 px;
    margin: 0 auto;
  }
  
  /*Media Queries*/
  @media only screen and(max - width: 1199 px),
    only screen and(max - device - width: 1199 px) {#
      container {
        width: 1000 px;
      }
    }
  
  
  @media only screen and(max - width: 999 px),
    only screen and(max - device - width: 999 px) {#
      container {
        width: 800 px;
      }
    }
  
  @media only screen and(max - width: 799 px),
    only screen and(max - device - width: 799 px) {#
      container {
        width: 600 px;
      }
    }
  
  @media only screen and(max - width: 599 px),
    only screen and(max - device - width: 599 px) {#
      container {
        width: 400 px;
      }
    }
  
  @media only screen and(max - width: 399 px),
    only screen and(max - device - width: 399 px) {#
      container {
        width: 200 px;
      }
    }
  </code></pre>
  
  <p>I referred below guide:</p>
  
  <p><a href="https://designshack.net/articles/css/masonry/" rel="nofollow">Three Super Easy Ways to Pull Off a Masonry Layout</a></p>