带有angularjs的网格/平铺视图

Question

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

是否有 angularjs插件我可以使用？

我听说 jquery砌筑，还有更好的选择吗？

正如@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

而且我也在寻找其他选项，因为我不想用像棱镜这样的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不相互重叠，只要reload或{{1}，您就需要 masonry show内在的hide。我在div上添加了function，这也会ng-click broadcast个事件重新加载。{/ p>

检查this工作代码。

<强> JS

masonry.reload

<强> HTML

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

修改

由于<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转换的动画需要时间的情况下立即重新加载，因此似乎存在问题。我在this插件中添加了一些转换持续时间和masonry。

Answer 2

这实际上可以使用Pure CSS和HTML。 CSS 3规范提供column-gap＆amp; 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>

希望它对你有用。