我有一個plunker，它的工作方式除了當我第一次加載頁面（或刷新頁面）時，所有的同位素元素都堆疊在一起。Angularjs砌體圖像堆積

是否有人知道一個解決方案？

<ul class="grid" masonry="true"> 
    <li ng-repeat="bike in bikes | filter: { model: nameFilter } | orderBy: order"> 
     <img ng-src="{{bike.picture}}" ng-click="open(bike)"/> 
    </li> 
</ul>

來源

2014-11-05 mcneela86

對不起。通過堆疊，我的意思是，所有圖像都顯示在彼此的頂部 - 而不是以網格格式彼此相鄰。當我然後對元素進行排序或調整頁面大小時，它會重新計算並修復它自己。 – mcneela86 2014-11-05 05:18:08

你的意思是你想創建自己的指令來爲你的圖像做這個自動定位？ – 2014-11-05 05:27:47

不，我對它感到滿意，唯一的是：如何在頁面首次加載時讓圖像正確定位？ – mcneela86 2014-11-05 05:41:35

問題是，一旦所有圖像都完成了渲染，您需要致電element.masonry("reload");。

要做到這一點就需要使用其他指令，以瞭解當圖像已經添加和時圖像已經加載，這樣的：

.directive('imageonload', function() { 
    return { 
     restrict: 'A', 
     link: function(scope, element, attrs) { 
      scope.$emit('imageIn'); 
      element.bind('load', function() { 
       scope.$emit('imageLoaded'); 
      }); 
     } 
    }; 
});

然後，你將不得不使用該指令在您認爲是這樣的：

  <img ng-src="{{bike.picture}}" imageonload ng-click="open(bike)"/>

而在你masonry指令，你將不得不做這樣的事情：

  var nImages=0; 
      var nImagesLoaded=0; 
      scope.$on('imageIn', function(){ 
       nImages++; 
      }); 
      scope.$on('imageLoaded', function(){ 
       if(++nImagesLoaded===nImages) 
       element.masonry("reload"); 
      });

Working Example

來源

2014-11-05 05:29:39 Josep

Angularjs砌體圖像堆積

回答

Working Example

相關問題