Angularjs砌体图像堆叠

【问题标题】：Angularjs masonry image stackingAngularjs砌体图像堆叠
【发布时间】：2014-11-05 04:08:38
【问题描述】：

我有一个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>

【问题讨论】：

对不起。通过堆叠，我的意思是，所有图像都出现在彼此的顶部 - 而不是以网格格式彼此浮动。当我对元素进行排序或调整页面大小时，它会重新计算并自行修复。
你的意思是你想创建自己的指令来为你的图像做这个自动定位？
不，我对它的现状很满意，唯一的问题是：如何在页面首次加载时正确定位图像？

标签： angularjs jquery-masonry

【解决方案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");
            });

Working Example

【讨论】：