如何在单击按钮时重新加载砌体

Question

我的 html 代码 使用 ng-repeat 在文档上使用 ajax 调用显示记录：

<ul class="list-no-infinity pinterest-items clearfix" id="container">
  {% csrf_token %}
  <li ng-show="mealPlansExists" class="masonryImage item" ng-repeat="(key, mealplan) in mealplans" style="">
    <article class="post-article">
      <figure class="figure-hubba">
        <img ng-show="mealplan.mp_image" class="img-responsive" src="{$mealplan.mp_image | filterProfImgUrl $}" alt="tools you need for better meal planning">
        <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' %}">
        <div class="overlay overlay-black-70"></div>
        <figcaption class="figcaption">
          <a href="/mpb/mealplandetails/{$ mealplan.id$}/" class="icon">View</a>
        </figcaption>
      </figure>
      <header class="post-header clearfix">
        <h1 title="{$ mealplan.mp_name$}">{$ mealplan.mp_name | cut:true:25:' ...'$}</h1>
        <div class="small post-author">
          By: {$ mealplan.mp_by $}
        </div>
        <!-- /.post-author -->
        <div class="post-date">
          {$ mealplan.mp_created_at | date: 'M d, yyyy' $} {$ mealplan.mp_date$}
        </div>
      </header>
      <p title="{$ mealplan.desc $}">{$ mealplan.desc | cut:true:38:' ...'$}</p>
      <footer>
        <a ng-if="mealplan.subscribed == 1" class="btn btn-success btn-block" href="">Open</a>
        <a ng-if="mealplan.subscribed == 0" class="btn btn-success btn-block" href="#" ng-click="subScribeMealplan(mealplan.id)">Start Cooking</a>
        <!-- Rating -->
        <div ng-if="mealplan.avg_rating>=1" ng-init="rating = mealplan.avg_rating" class="post-icons">
          <a href="#">(<span class="mp_red">{$mealplan.subscriber_count$}</span>) Cooking </a>
          <div ng-click="up" class="stars pull-right" rating-count="mealplan.rating_count" class="star-rating" star-rating rating-value="rating" data-max="5">
          </div>
        </div>
        <div ng-if="mealplan.avg_rating == 0" ng-init="rating = star.rating -1" class="post-icons">
          <a href="javascript:;">(<span class="mp_red">{$mealplan.subscriber_count$}</span>) Cooking </a>
          <div class="stars pull-right" rating-count="0" class="star-rating" star-rating rating-value="rating" data-max="5">
          </div>
        </div>
      </footer>
    </article>
  </li>
</ul>

Angular ajax 调用 的代码并在 ng-repeat 中加载数据：

$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;
    }
  });

我正在使用 masonry 在页面上排列不同大小的 li 标签。我正在使用 jquery masonry 而我正在使用 angular js ng-repeat 将项目添加到 document.ready.

上的页面

Masonry 在下面 jquery 代码:

中使用的 ng-repeat 效果很好

$(function() {
  setTimeout(function() {
    var $container = $('#container');

    $container.imagesLoaded(function() {
      $container.masonry({
        itemSelector: '.masonryImage'
      });
    });
  }, 2000);
});

稍后我想在单击按钮时添加更多项目。这再次需要使用 ng-repeat 和 ajax 调用使用 angular js:

来完成

$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;
    }
  });
};

但是这里的砌体停止工作了，李标签也没有安排。我想在单击按钮时重新加载砌体。我尝试使用以下代码重新加载砌体 jquery code:

function masonryUpdate() {
    alert("masonry updated");
    setTimeout(function() {
        $('#container').masonry();
    }, 10000);
}

但是上面的代码并没有重新加载砌体。我也在下面使用 CSS:

/****************** 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;
    }
  }

我参考了以下指南：

Three Super Easy Ways to Pull Off a Masonry Layout

Answer 1

单击按钮时推送数据后，我调用了以下函数。

function masonryUpdate() {

        setTimeout(function() {
            var $container = $('#container');
            $container.masonry('reloadItems');
            $container.masonry();
        },500);
    }

并且新加载的元素根据砌体重新排列。

如何在单击按钮时重新加载砌体

how to reload masonry on button click

jquery

angularjs

jquery-masonry