如何刷新按鈕磚石點擊

我HTML代碼採用NG-重複的文件準備使用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>

爲Ajax調用角碼NG重複和加載數據：

$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 masonry，而我正在使用angular js ng-repeat將項目添加到document.ready上的頁面。

砌體工作的很好NG重複使用如下面jQuery代碼：

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

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

後來我想添加按鈕點擊更多項目。這又需要用NG-重複和Ajax調用使用角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 代碼代碼重載砌築：

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

來源

2016-08-02 Simer

我以下稱爲功能一旦數據在按鈕點擊推動。

function masonryUpdate() { 

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

和新加載的元素根據磚石重新排列。

來源

2016-08-03 12:42:52 Simer

如何刷新按鈕磚石點擊

回答

相關問題