Question

我有一个容器，我想在其中显示项目，就像它们在两列中一样每个项目的高度都不同，因为其中的内容会有所不同。

目前看来是这样的： first

我想垂直移除物品之间的额外空间，以便更接近这一点：
second

这样看起来好像是堆叠的物品。

指向示例代码的链接： http://plnkr.co/edit/oc1XT4ia9GdIc4rzZ41Q?p=preview

Answer 1

由于问题是使用AngularJS，这个答案与此相符。

您需要在重复周围创建一个div，并为每个列重复一次，然后在ng-show="($index)%2==columnIndex"显示或隐藏其中的元素。

然后浮动两个包装div，并为1px纯黑色容器添加标准clearfix，使其环绕浮动元素。

＆＃13;

'use strict';

var app = angular.module( 'myApp', [] );

app.controller( 'myCtrl', [ '$scope', function ( $scope ){
  
  $scope.value = 'test';
  $scope.items = [];
  var count = 10;
  
  for(var i=0; i<count; i++){
    var item = {
      height: Math.round(Math.random()*30) + 20
    };
    $scope.items.push(item);
  }

}] );

＆＃13;

.itemContainer {
  display: block;
  width: 80%;
  border: 1px solid black;
  padding: 10px;
}

.item {
  border: 1px solid blue;
  padding: 5px;
  margin: 1px;
  display: block;
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
 
.clearfix {
    display: inline-block;
}

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  </head>
  <body ng-app="myApp" ng-controller="myCtrl">
    <div class='itemContainer clearfix'>
      <div style="display:inline-block; float:left; width:40%;">
        <div class="item" ng-repeat="item in items" style="height: {{item.height}}px" ng-show="($index)%2==1" >
          {{item}}
        </div>
      </div>
      <div style="display:inline-block; float:left; width:40%;">
        <div class="item" ng-repeat="item in items" style="height: {{item.height}}px" ng-show="($index)%2==0" >
          {{item}}
        </div>
      </div>
    </div>
  </body>
</html>

＆＃13;

您可以围绕重复包装float:left元素重复，并指定所需的列数，如果要动态调整列大小，则必须注意调整大小并使用它更改列大小。< / p>

为了防止双重处理问题，您最好使用过滤器，而不是ng-show。

将来希望我们可以使用flexible boxes layout module而不会破坏某些浏览器。

Answer 2

仅供记录。这是实现此目的的一种方法的an HTML and CSS-only版本。

<强> HTML ：

<div id="LeftColumn">
    <div class="left_cell">Just</div>
    <div class="left_cell">The</div>
    <div class="left_cell"></div>
    <div class="left_cell"></div>
</div>
<div id="RightColumn">
    <div class="right_cell">For</div>
    <div class="right_cell">Record</div>
    <div class="right_cell"></div>
    <div class="right_cell"></div>
</div>

<强> CSS ：

#LeftColumn {
    width: 200px;
    float: left;
}

#RightColumn {
    width: 200px;
    float: left;
    margin-left:4px;
}

.left_cell {
    width:200px;
    height:30px;
    border: 1px solid blue;
    margin-bottom:2px;
}

.right_cell {
    width:200px;
    height:42px;
    border: 1px solid blue;
    margin-bottom:2px;
}

检查fiddle here。正如您所看到的，只需将每列的内容放在单独的 div元素上，然后浮动两个div。

Answer 3

经过一些研究后，我发现用CSS做的确很难，所以我写了一个小的AngularJS指令来进行一些处理。

在此演示：http://plnkr.co/edit/UyRS0clrCwDpSrYgBsXS?p=preview

var app = angular.module( 'myApp', [] );

app.controller( 'myCtrl', [ '$scope', function ( $scope ){

  $scope.value = 'test';
  $scope.items = [];
  var count = 20;

  for(var i=0; i<count; i++){
    var item = {
      height: Math.round(Math.random()*30) + 20,
      value: Math.round(Math.random()*30) + 20
    };
    $scope.items.push(item);
  }

}] );

app.directive('columns', function(){
  return {
    restrict: 'E',
    scope: {
        itemList: '=', 
        colCount: "@"
    },
    link: function(scope, elm, attrs) {
      //console.log(scope.itemList);
      var numCols = 3;
      var colsArr = [];
      for(var i=0; i< numCols; i++){
        colsArr.push(angular.element("<div class='column'>Col "+(i+1)+"</div>"));
         elm.append(colsArr[i]);
      }

      angular.forEach(scope.itemList, function(value, key){
        var item = angular.element("<div class='item' style='height:"+value.height+"px;'>"+value.value+"</div>");
        // find smallest column
        var smallestColumn = getSmallestColumn();
        angular.element(smallestColumn).append(item);

      });

      function getSmallestColumn(){
        var smallestHeight = colsArr[0][0].offsetHeight;
        var smallestColumn = colsArr[0][0]; 
        angular.forEach(colsArr, function(column, key){ 
          if(column[0].offsetHeight < smallestHeight){
            smallestHeight = column[0].offsetHeight;
            smallestColumn = colsArr[key]; 
          }
        }); 
        console.log(smallestColumn);
        return smallestColumn;
      }
    }
  };
});

这是html：

<columns item-list="items" col-count='3' class='itemContainer'></columns>

Answer 4

您可以使用新的flex显示方法来实现此目的。

HTML

<div >
<div style="height: 45px;"></div>
<div style="height: 31px;"></div>
<div style="height: 31px;"></div>
<div style="height: 34px;"></div>
<div style="height: 27px;"></div>
<div style="height: 23px;"></div>
<div style="height: 41px;"></div>
<div style="height: 34px;"></div>
<div style="height: 48px;"></div>
<div style="height: 47px;"></div>
</div>

CSS

body > div {
    height: 220px;
    padding: 1px;
    display: flex;
    flex-flow: column wrap;
    border: 1px solid;
}
body > div > div {
    border: 1px solid blue;
    margin: 1px;
}

CSS在两列中的项目之间折叠空间

4 个答案:

HTML

CSS