使用 AngularJS 砌体

Question

我正在开发一个“艺术画廊”应用程序。

随意拉下 source on github 并使用它。

Plunker with full source.

目前让 Masonry 与 Angular 配合得很好的解决方法：

.directive("masonry", function($parse) {
  return {
    restrict: 'AC',
    link: function (scope, elem, attrs) {
      elem.masonry({ itemSelector: '.masonry-brick'});
    }
  };     
})
.directive('masonryBrick', function ($compile) {
  return {
    restrict: 'AC',
    link: function (scope, elem, attrs) {
      scope.$watch('$index',function(v){
        elem.imagesLoaded(function () {
          elem.parents('.masonry').masonry('reload');
        });
      });
    }
  };    
});

这不好用，因为：

• 随着内容的增长，在整个容器上触发重新加载的开销也会增加。

reload 函数：

• 不“追加”项目，而是重新排列容器中的每个项目。
• 是否在项目从结果集中过滤时触发重新加载。

在我上面给出的应用程序的上下文中，这个问题很容易复制。

我正在寻找一种使用指令来利用的解决方案：

.masonry('appended', elem) 和.masonry('prepended', elem)

而不是每次都执行.masonry('reload')。

.masonry('reload') 表示何时从结果集中删除元素。

---

编辑

该项目已更新为使用下面的工作解决方案。

在 GitHub

上获取来源

在 Plunker

上查看工作版本

Answer 1

我一直在玩这个，@ganaraj 的回答非常简洁。如果您在他的控制器的appendBrick 方法中粘贴$element.masonry('resize'); 并说明 图像加载然后看起来它可以工作。

这是一个带有它的 plunker fork：http://plnkr.co/edit/8t41rRnLYfhOF9oAfSUA

之所以需要这样做是因为只有在元素上初始化砌体或调整容器大小时才会计算列数，此时我们还没有任何砖块，因此它默认为单列。

如果您不想使用“调整大小”方法（我认为它没有记录在案），那么您可以调用 $element.masonry() 但这会导致重新布局，所以您只想在添加第一块砖时调用它。

编辑：我已经更新了上面的 plunker，只在列表长度超过 0 时调用 resize，并且在同一个 $digest 中移除多个砖块时只执行一次“重新加载”循环。

指令代码为：

angular.module('myApp.directives', [])
  .directive("masonry", function($parse, $timeout) {
    return {
      restrict: 'AC',
      link: function (scope, elem, attrs) {
        elem.masonry({ itemSelector: '.masonry-brick'});
        // Opitonal Params, delimited in class name like:
        // class="masonry:70;"
        //elem.masonry({ itemSelector: '.masonry-item', columnWidth: 140, gutterWidth: $parse(attrs.masonry)(scope) });
      },
      controller : function($scope,$element){
          var bricks = [];
          this.appendBrick = function(child, brickId, waitForImage){
            function addBrick() {
              $element.masonry('appended', child, true);

              // If we don't have any bricks then we're going to want to 
              // resize when we add one.
              if (bricks.length === 0) {
                // Timeout here to allow for a potential
                // masonary timeout when appending (when animating
                // from the bottom)
                $timeout(function(){
                  $element.masonry('resize');  
                }, 2);  
              }

              // Store the brick id
              var index = bricks.indexOf(brickId);
              if (index === -1) {
                bricks.push(brickId);
              }
            }

            if (waitForImage) {
              child.imagesLoaded(addBrick);      
            } else {
              addBrick();
            }
          };

          // Removed bricks - we only want to call masonry.reload() once
          // if a whole batch of bricks have been removed though so push this
          // async.
          var willReload = false;
          function hasRemovedBrick() {
            if (!willReload) {
              willReload = true;
              $scope.$evalAsync(function(){
                willReload = false;
                $element.masonry("reload");
              });
            }
          }

          this.removeBrick = function(brickId){
              hasRemovedBrick();
              var index = bricks.indexOf(brickId);
              if (index != -1) {
                bricks.splice(index,1);
              }
          };
      }
    };     
  })
  .directive('masonryBrick', function ($compile) {
    return {
      restrict: 'AC',
      require : '^masonry',
      link: function (scope, elem, attrs, MasonryCtrl) {

      elem.imagesLoaded(function () {
        MasonryCtrl.appendBrick(elem, scope.$id, true);
      });

      scope.$on("$destroy",function(){
          MasonryCtrl.removeBrick(scope.$id);
      }); 
    }
  };
});

Answer 2

这不是您要找的东西（prepend 和 append），但应该正是您要找的东西：

http://plnkr.co/edit/dmuGHCNTCBBuYpjyKQ8E?p=preview

您的指令版本为每个brick 触发reload。此版本仅触发一次重新加载整个列表更改一次。

方法很简单：

1. 在父 masonry controller 中注册新的 bricks
2. $watch 用于更改已注册的 bricks 并触发 masonry('reload')
3. 删除元素时从bricks 注册表中删除brick - $on('$destroy')
4. ?
5. 利润

您可以扩展这种方法来做您想做的事（使用prepend 和append），但我看不出您有任何理由这样做。这也会复杂得多，因为您必须手动跟踪元素的顺序。我也不相信它会更快 - 相反它可能会更慢，因为如果你改变了很多砖块，你将不得不触发多个append/prepend。

我不太确定，但我想您可以为此使用 ng-animate（JavaScript 动画版）

我们在日历应用中为tiling 事件实现了类似的功能。这个解决方案被证明是最快的。如果有人有更好的解决方案，我很乐意看到。

对于那些想要查看代码的人：

angular.module('myApp.directives', [])
  .directive("masonry", function($parse) {
    return {
      restrict: 'AC',
      controller:function($scope,$element){
        // register and unregister bricks
        var bricks = [];
        this.addBrick = function(brick){
          bricks.push(brick)
        }
        this.removeBrick = function(brick){
          var index = bricks.indexOf(brick);
          if(index!=-1)bricks.splice(index,1);
        }
        $scope.$watch(function(){
          return bricks
        },function(){
          // triggers only once per list change (not for each brick)
          console.log('reload');
          $element.masonry('reload');
        },true);
      },
      link: function (scope, elem, attrs) {
        elem.masonry({ itemSelector: '.masonry-brick'});
      }
    };     
  })
  .directive('masonryBrick', function ($compile) {
    return {
      restrict: 'AC',
      require:'^masonry',
      link: function (scope, elem, attrs,ctrl) {
        ctrl.addBrick(scope.$id);

        scope.$on('$destroy',function(){
          ctrl.removeBrick(scope.$id);
        });
      }
    };
  });

编辑： 我忘记了一件事（加载图像） - 加载所有图像后只需调用“重新加载”即可。稍后我会尝试编辑代码。

Answer 3

嘿，我刚刚为 AngularJS 制作了 masonry 指令，它比我见过的大多数实现简单得多。在这里查看要点：https://gist.github.com/CMCDragonkai/6191419

它与 AMD 兼容。需要 jQuery、imagesLoaded 和 lodash。适用于动态数量的项目、AJAX 加载的项目（即使是初始项目）、窗口大小调整和自定义选项。前置项、附加项、重新加载项……等 73 行！

这里有一个 plunkr 显示它可以工作：http://plnkr.co/edit/ZuSrSh?p=preview（没有 AMD，但代码相同）。

Answer 4

Angular 中记录最少的特性之一是它的指令控制器（尽管它位于 www.angularjs.org 的首页 - 选项卡上）。

这是一个使用这种机制的修改后的 plunker。

http://plnkr.co/edit/NmV3m6DZFSpIkQOAjRRE

人们确实使用指令控制器，但它已被用于（和滥用）它可能不适合的事情。

在上面的 plunker 中，我只修改了 directives.js 文件。指令控制器是指令之间通信的一种机制。有时，在一个指令中完成所有事情是不够/容易的。在这种情况下，您已经创建了两个指令，但是让它们交互的正确方法是通过指令控制器。

我无法弄清楚你什么时候想要添加，什么时候想要添加。我目前只实现了“追加”。

另外附注：如果资源尚未实现承诺，您可以自己实现它们。做到这一点并不难。我注意到您正在使用回调机制（我不推荐）。你已经在那里做出了承诺，但你仍然在使用我无法理解的回调。

这是否为您的问题提供了适当的解决方案？

有关文档，请参阅 http://docs.angularjs.org/guide/directive > 指令定义对象 > 控制器。

Answer 5

我相信我也遇到过同样的问题：

ng-repeat 循环中的许多图像，并希望在它们加载并准备好时对其应用砌体/同位素。

问题是即使在 imagesLoaded 被回调后，仍有一段时间图像不“完整”，因此无法正确测量和布局。

我提出了以下适用于我的解决方案，并且只需要一个布局通道。它分三个阶段发生

1. 等待图像加载（当最后一个从循环中添加时 - 使用 jQuery 图像加载插件）。
2. 等待所有图像“完成”
3. 布局图像。

---

angularApp.directive('checkLast', function () {
    return {
        restrict: 'A',
        compile: function (element, attributes) {
            return function postLink(scope, element) {
                if (scope.$last === true) {
                    $('#imagesHolder').imagesLoaded(function () {
                        waitForRender();
                    });
                }
            }
        }
    }
});

function waitForRender() {
    //
    // We have to wait for every image to be ready before we can lay them out
    //
    var ready = true;
    var images = $('#imagesHolder').find('img');
    $.each(images,function(index,img) {
        if ( !img.complete ) {
            setTimeout(waitForRender);
            ready = false;
            return false;
        }
    });
    if (ready) {
        layoutImages();
    }
}

function layoutImages() {
    $('#imagesHolder').isotope({
        itemSelector: '.imageHolder',
        layoutMode: 'fitRows'
    });
}

这适用于这样的布局

<div id="imagesHolder">
    <div class="imageHolder"
         check-last
         ng-repeat="image in images.image"
        <img ng-src="{{image.url}}"/>
    </div>
</div>

我希望这会有所帮助。

Answer 6

您可以将它们合并到一个指令中，而不是使用两个指令。比如：

.directive("masonry", function($timeout) {
    return {
        restrict: 'AC',
        template: '<div class="masonry-brick" ng-repeat="image in pool | filter:{pool:true}">' +
                        '<span>{{image.albumTitle|truncate}}</span>' +
                        '<img ng-src="{{image.link|imageSize:t}}"/>' +
                  '</div>',
        scope: {
            pool: "="
        },
        link: function(scope, elem, attrs){
            elem.masonry({itemSelector: '.masonry-brick'});

            // When the pool changes put all your logic in for working out what needs to be prepended
            // appended etc
            function poolChanged(pool) {

                //... Do some logic here working out what needs to be appended, 
                // prepended...

                // Make sure the DOM has updated before continuing by doing a $timeout
                $timeout(function(){
                    var bricks = elem.find('.masonry-brick');
                    brick.imagesLoaded(function() {
                        // ... Do the actual prepending/appending ...
                    });
                });
            }

            // Watch for changes to the pool
            scope.$watch('pool', poolChanged, true); // The final true compares for 
                                                     // equality rather than reference
        }
    }
});

和html用法：

<div class="masonry" pool="pool"></div>