Grid/Tile 查看 angularjs

Question

我有 100 个 100px 宽度的 divs，可以放入 250px 宽度的父对象中。无论高度如何，我都需要 div 以行显示，如图所示。我已经尝试用 css 解决这个问题，遗憾的是我明白了现实。

有什么angularjs插件可以用吗？

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

当@Divyanshu Maithani 要求一个 plunker 解决我当前的问题时，请参阅下面的 plunker link，我在其中尝试使用 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

我也在寻找其他选择，因为我不想用 jquery 插件来结束我的问题，比如 angular-masonry.Any 帮助将是 appreciated.Thanks

Answer 1

争取 AngularJS Masonry。你可以在主页看到演示。使用 masonry-brick class:

很简单

<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。我在 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

这是您要查找的示例 for.Click link

Html/View

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

希望对你有用。

Answer 3

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

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

所以widths和gaps可以这样写：

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

我制作了一个 fiddle，其中显示了一个工作示例。在 Chrome、Firefox 和 Safari 上完美运行。

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

Grid/Tile 查看 angularjs

Grid/Tile view with angularjs

html

css

jquery-masonry

angularjs