html - 带有 angularjs 的网格/平铺 View

我有 100 个宽度为 100px 的 div s，可以放入 250px 宽度的父级。无论高度如何，我都需要将 div s 以行显示，如图所示。我试过用 css 解决这个问题，遗憾的是我理解了现实。



有没有我可以使用的 angularjs 插件 ？

我听说过 jquery masonry ，有没有更好的选择？

当@Divyanshu Maithani 要求解决我当前的问题时，
请参阅下面的 plunker 链接，其中我试图用 angular-masonry 解决我的问题

<div masonry>
    <div ng-repeat="item in items" class="masonry-brick item">
      {{item.name}}
      <button class="toggle-button" ng-click="item.show=!item.show">show</button>
      <div ng-if="item.show" class="hidden-box">
        This is a hidden box for {{$index+1}}th item.
      </div>
    </div>
  </div>

Plunker DEMO

而且我也在寻找其他选项，因为我不想用像 angular-masonry 这样的 jquery 插件结束我的问题。任何帮助将不胜感激。谢谢

最佳答案

去 AngularJS Masonry 。您可以在主页上看到演示。使用 masonry-brick 类很简单:

<div masonry>
    <div class="masonry-brick" ng-repeat="brick in bricks">
        <img ng-src="{{ brick.src }}" alt="A masonry brick">
    </div>
</div>

更新

为了让您的 masonry-brick 不相互重叠，您需要 reload masonry 每当您 show 或 hide 一个内部 div 。我在 function 上添加了一个 ng-click ，它也会 broadcast 一个 masonry.reload 事件来重新加载相同的事件。

检查 this 工作代码。

JS

$scope.showItem = function(index) {
    $scope.items[index].show = !($scope.items[index].show);
    $scope.$broadcast('masonry.reload');
}

HTML

<div masonry>
    <div ng-repeat="item in items" class="masonry-brick item">
      {{item.name}}
      <button class="toggle-button" ng-click="showItem($index)">show</button>
      <button class="toggle-button" ng-click="remove($index)">X</button>
      <div ng-if="item.show" class="hidden-box">
        This is a hidden box for {{$index+1}}th item.
      </div>
    </div>
</div>

编辑

由于 masonry 会立即重新加载而 masonry 过渡的动画需要时间，因此似乎存在问题。我在 this plunk 中添加了一些过渡持续时间和 $timeout。

关于html - 带有 angularjs 的网格/平铺 View ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40419213/