Working Example

Question

我有一个plunker可以达到我想要的效果，但是当我第一次加载页面（或刷新页面）时，所有同位素元素都堆叠在一起。

有人知道这方面的解决方案吗？

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

Answer 1

问题是，所有图像完成渲染后，您需要调用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");
            });

Angularjs砌体图像堆叠

1 个答案:

Working Example