使用 angularjs 的网格/平铺视图

Question

我有 100 个宽度为 100 像素的 divs，可以放入宽度为 250 像素的父级。无论高度如何，我都需要将divs 显示在行中，如图所示。我试过用 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 插件来结束我的问题。任何帮助将不胜感激。谢谢

Answer 1

去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 不会相互重叠，您需要在show 或hide 内部div 时使用reload masonry。我在ng-click 上添加了一个function 这样做，这也将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。

Answer 2

这实际上可以通过纯 CSS 和 HTML 实现。 CSS 3 规范提供了column-gap 和column-width 属性，可以定义列之间的间隙。

流行的浏览器已经开始支持相同的（-webkit-column-width, -webkit-column-gap, -moz-column-width, -moz-column-gap 都支持）。

所以宽度和间隙可以写成如下方式：

#columns {
  -webkit-column-width: 220px;
  -webkit-column-gap: 15px;
  -moz-column-width: 220px;
  -moz-column-gap: 15px;
  column-width: 220px;
  column-gap: 15px;
}

我制作了一个小提琴，展示了一个工作示例。在 Chrome、Firefox 和 Safari 上完美运行。

https://jsfiddle.net/nashcheez/3cf9qrap/3/

Answer 3

这是您要查找的示例。点击link

HTML/视图

 <div ng-repeat="item in items" class="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>

希望对你有用。