Question

使用AngularJS ng-repeat我有一系列不同大小的div来填充页面。问题（如下所示）是当我想要一个元素出现在一个新行上时，我想让它对齐它上面的元素，而它会对齐这个＆＃39;行上的所有元素。最低悬挂元素。

我正在使用Bootstrap，但是我对如何使用网格系统来获取可能跨越每列高度的数据感到茫然。相反，所有div都只是float：left＆＃39; d具有max-width和height：auto，用于创建响应的左对齐网格，但不尊重每行的单个元素放置。

例如，这个网格将在第二个＆＃39;行上有第一个元素。（243 x 399）在第一行＆＃39;的第一个元素下面是一定数量的像素。（224 x 305），一定数量的像素是一个指定的边距（尽管我很好，因为它与元素齐平）。然后320 x 347将是344 x 246以下相同数量的像素，依此类推。

我知道如何在Javascript / JQuery中执行此操作，虽然它确实感觉非常hacky并且我觉得必须有一种更惯用的方法来使用CSS来实现这个目标。

＆＃13;

var routeApp = angular.module('routerApp', []);
routeApp.controller('loadCtrl', ['$scope',
  function($scope) {
    $scope.tiles = [];
    for (var i = 0; i < 10; i++) {
      var d = Math.floor(Math.random() * (400 - 200 + 1)) + 200;
      var e = Math.floor(Math.random() * (400 - 200 + 1)) + 200;
      $scope.tiles.push("http://placehold.it/" + d.toString() + "x" + e.toString());
    }
  }
]);

＆＃13;

.tiles {
  float: left;
  max-width: 200px;
  width: 100%;
  height: auto;
  margin: 5 auto;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body ng-app="routerApp">
  <div ng-controller="loadCtrl">
    <div ng-repeat="til in tiles track by $index">
      <a href="www.google.com"/>
        <img class="tiles" ng-src="{{til}}"/>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

＆＃13;

Answer 1

我回答了类似的问题here

如果这没有成功，请告诉我，我可以尝试详细说明。

基本上浮动就像试图用透明胶带修补泄漏。 =）

Answer 2

列宽CSS属性表明最佳列宽。

如果您想要仅限CSS的解决方案，可以使用column-width和column-gap（可能还有column-count）属性来创建网格。

请务必检查 Caniuse.com 以获取浏览器支持信息：

column-width
column-gap
column-count

CSS示例

var routeApp = angular.module('routerApp', []);

routeApp.controller('loadCtrl', ['$scope',
  function($scope) {
    $scope.tiles = [];
    for (var i = 0; i < 50; i++) {
      var d = Math.floor(Math.random() * (400 - 200 + 1)) + 200;
      var e = Math.floor(Math.random() * (400 - 200 + 1)) + 200;
      $scope.tiles.push("http://placehold.it/" + d.toString() + "x" + e.toString() + "/000/fff");
    }
  }
]);

示例1：刷新列 - 在 FullPage上运行代码段

＆＃13;

body {
  padding: 0;
}
.grid {
  -moz-column-width: 200px;
  -webkit-column-width: 200px;
  column-width: 200px;
  -moz-column-gap: 0px;
  -webkit-column-gap: 0px;
  column-gap: 0px;
  -webkit-perspective: 1
}
.grid .grid-block {
  display: inline-block;
  margin: 0;
  width: 100%;
}
.grid .grid-block .tiles {
  width: 100%;
  height: auto;
  border: 1px solid teal;
  transition: all 300ms linear;
}
.grid .grid-block .tiles:hover {
  opacity: 0.45;
}

＆＃13;

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<body ng-app="routerApp">

  <div ng-controller="loadCtrl" class="grid">
    <div ng-repeat="tile in tiles track by $index" class="grid-block">
      <a href="https://www.google.com">
        <img class="tiles" ng-src="{{tile}}" />
      </a>
    </div>
  </div>

</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.js"></script>

＆＃13;

var routeApp = angular.module('routerApp', []);

routeApp.controller('loadCtrl', ['$scope',
  function($scope) {
    $scope.tiles = [];
    for (var i = 0; i < 50; i++) {
      var d = Math.floor(Math.random() * (400 - 200 + 1)) + 200;
      var e = Math.floor(Math.random() * (400 - 200 + 1)) + 200;
      $scope.tiles.push("http://placehold.it/" + d.toString() + "x" + e.toString() + "/008080/000");
    }
  }
]);

＆＃13;

示例1：包含空格的列 - 在 FullPage上运行代码段

＆＃13;

body {
  padding: 3px;
}
.grid {
  -moz-column-width: 200px;
  -webkit-column-width: 200px;
  column-width: 200px;
  -moz-column-gap: 6px;
  -webkit-column-gap: 6px;
  column-gap: 6px;
  -webkit-perspective: 1
}
.grid .grid-block {
  display: inline-block;
  margin: 3px 0;
  width: 100%;
}
.grid .grid-block .tiles {
  width: 100%;
  height: auto;
  border: 1px solid black;
  transition: all 300ms linear;
}
.grid .grid-block .tiles:hover {
  opacity: 0.45;
}

＆＃13;

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<body ng-app="routerApp">

  <div ng-controller="loadCtrl" class="grid">
    <div ng-repeat="tile in tiles track by $index" class="grid-block">
      <a href="https://www.google.com">
        <img class="tiles" ng-src="{{tile}}" />
      </a>
    </div>
  </div>

</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.js"></script>

＆＃13;

{{1}}

＆＃13;

如何在尽可能少的JavaScript中使用垂直堆叠的网格

2 个答案: