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

永远的守望者

我的html代码可以使用ajax调用在准备就绪的文档上使用ng-repeat显示记录:

<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>

用于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;
    }
  });

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

在下面的jquery代码中使用的ng-repeat砌筑效果很好

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

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

稍后,我想在按钮单击上添加更多项目。再次需要使用Angular js使用ng-repeat和ajax调用来完成此操作

$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代码重装砌体

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

我参考了以下指南:

三种简单的砌体布局方法

永远的守望者

按下按钮后按下数据后,我调用了下面的函数。

function masonryUpdate() {

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在按钮上单击使用TypeScript

来自分类Dev

如何在按钮上运行代码单击Android片段

来自分类Dev

javafx如何在按钮单击事件上扩展整个treeItem?

来自分类Dev

如何在按钮上单击加载页面

来自分类Dev

如何在按钮单击上浏览选项卡

来自分类Dev

单击ajax加载更多按钮时未重新加载砌体项目

来自分类Dev

在按钮单击/ JavaScript上重新绘制Google图表

来自分类Dev

如何在按钮上单击打开instagram应用程序

来自分类Dev

React:如何在不同的按钮单击上加载不同的API

来自分类Dev

在按钮上加载新组件单击在ReactJs中?

来自分类Dev

如何在按钮上单击“意图”来启动Facebook lite

来自分类Dev

如何在按钮上单击javascript中创建动态数组

来自分类Dev

如何在按钮上添加单独的HTML元素单击Python Dash

来自分类Dev

如何在按钮上单击以显示其类的另一个布局(xml)?

来自分类Dev

如何在按钮上运行代码单击Android片段

来自分类Dev

如何在按钮上单击ios更改UICollectionView的数据?

来自分类Dev

如何在按钮单击上添加一行?

来自分类Dev

如何在按钮单击上添加更多元素

来自分类Dev

如何在按钮上单击后启动按钮上的活动复选框

来自分类Dev

javafx如何在按钮单击事件上扩展整个treeItem?

来自分类Dev

如何在按钮的单击方法上在Uiimageview上设置按钮图像?

来自分类Dev

如何在按钮单击上绘制矩形?

来自分类Dev

如何在按钮上单击将ListView更改为GridView

来自分类Dev

如何在按钮单击事件上将值加载到同一JSP页面中

来自分类Dev

在按钮单击/ JavaScript上重新绘制Google图表

来自分类Dev

如何在按钮单击时显示加载程序

来自分类Dev

单击按钮时如何在按钮上创建警报对话框?

来自分类Dev

如何在按钮上动态加载 API 数据 单击 React Native

来自分类Dev

如何在按钮单击时在主索引 html 中加载 html

Related 相关文章

  1. 1

    如何在按钮上单击使用TypeScript

  2. 2

    如何在按钮上运行代码单击Android片段

  3. 3

    javafx如何在按钮单击事件上扩展整个treeItem?

  4. 4

    如何在按钮上单击加载页面

  5. 5

    如何在按钮单击上浏览选项卡

  6. 6

    单击ajax加载更多按钮时未重新加载砌体项目

  7. 7

    在按钮单击/ JavaScript上重新绘制Google图表

  8. 8

    如何在按钮上单击打开instagram应用程序

  9. 9

    React:如何在不同的按钮单击上加载不同的API

  10. 10

    在按钮上加载新组件单击在ReactJs中?

  11. 11

    如何在按钮上单击“意图”来启动Facebook lite

  12. 12

    如何在按钮上单击javascript中创建动态数组

  13. 13

    如何在按钮上添加单独的HTML元素单击Python Dash

  14. 14

    如何在按钮上单击以显示其类的另一个布局(xml)?

  15. 15

    如何在按钮上运行代码单击Android片段

  16. 16

    如何在按钮上单击ios更改UICollectionView的数据?

  17. 17

    如何在按钮单击上添加一行?

  18. 18

    如何在按钮单击上添加更多元素

  19. 19

    如何在按钮上单击后启动按钮上的活动复选框

  20. 20

    javafx如何在按钮单击事件上扩展整个treeItem?

  21. 21

    如何在按钮的单击方法上在Uiimageview上设置按钮图像?

  22. 22

    如何在按钮单击上绘制矩形?

  23. 23

    如何在按钮上单击将ListView更改为GridView

  24. 24

    如何在按钮单击事件上将值加载到同一JSP页面中

  25. 25

    在按钮单击/ JavaScript上重新绘制Google图表

  26. 26

    如何在按钮单击时显示加载程序

  27. 27

    单击按钮时如何在按钮上创建警报对话框?

  28. 28

    如何在按钮上动态加载 API 数据 单击 React Native

  29. 29

    如何在按钮单击时在主索引 html 中加载 html

热门标签

归档