javascript - 三列等高，每列对应行

Question

我需要创建一个包含三列的布局，每一列中对应的行需要具有相同的高度。对此的要求是。

1. 三列
2. 每一列内有多行。
3. 每一行的高度必须相同。
4. 在移动设备上，列将变成 slider 。

为此，我考虑了 2 种布局选项。

1. 定位每一列中的每一行并使用 Javascript 设置高度

<div class="container">
  <div class="col">
    <div class="row">row 1</div>
    <div class="row">row 2</div>
    <div class="row">row 3</div>
  </div>
  <div class="col">
    <div class="row">row 1</div>
    <div class="row">row 2</div>
    <div class="row">row 3</div>
  </div>
  <div class="col">
    <div class="row">row 1</div>
    <div class="row">row 2</div>
    <div class="row">row 3</div>
  </div>
</div>

这种布局非常理想，因为我可以定位列并添加阴影样式，而不必定位每一行并应用于每一行。由于有三个容器列，因此在移动设备上实现 slider 会更容易。但是，遍历每一列并获取相应的行并更新每一列的高度似乎需要做很多工作，尤其是因为每次调用 api 时都需要重新计算高度(上面有过滤器允许您更新数据)。

1. 使用 flex

<div class="container">
  <div class="row">
    <div class="col">
      row 1 col 1
    </div>
    <div class="col">
      row 1 col 2
    </div>
    <div class="col">
      row 1 col 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      row 2 col 1
    </div>
    <div class="col">
      row 2 col 2
    </div>
    <div class="col">
      row 2 col 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      row 3 col 1
    </div>
    <div class="col">
      row 3 col 2
    </div>
    <div class="col">
      row 3 col 3
    </div>
  </div>
</div>

这种方式很吸引人，因为我不需要用JS来设置每列对应行的高度。但是，我需要为每一行设置单独的样式，例如阴影，这意味着我需要使用各种技巧，以免将阴影应用于每一行的顶部和底部，这也存在风险这将无法在不同的浏览器中正确显示(需要追溯到 IE 10)。此外，我能够激活的唯一 slider 效果是不符合要求的溢出滚动。

那么，我的问题是，还有其他我没有考虑的选择吗？你会怎么做？

Answer 1

我会考虑选项 1，原因如下:

• 您的标记在语义上是正确的(3 列，每列有一些行)并且干净
• 可以轻松应用您的列样式
• 遍历所有行来计算最大高度并没有那么麻烦，尤其是当您只有几行时。

使用 vanilla JavaScript 的解决方案可能如下所示。无论何时应用过滤器，您都可以将代码包装到一个函数中并调用它:

var rows = document.querySelectorAll(".col:nth-child(1) > .row").length, n
for (n = 1; n <= rows; ++n) {
  var cells = document.querySelectorAll('.row:nth-child(' + n + ')')
  var maxHeight = 0, i
  for (i = 0; i < cells.length; ++i) {
    maxHeight = (cells[i].clientHeight > maxHeight) ? cells[i].clientHeight : maxHeight
  }
  cells.forEach(function(cell){
    cell.style.height = Number(maxHeight-10) + 'px'
  })
}

.col {
  display: inline-block;
  width: calc(33% - 41px);
  margin: 10px 10px;
  padding: 10px;
  border-radius: 15px;
  box-shadow: 0 0 20px #aaa;
  vertical-align: top;
}
.row {
  border-top: 3px solid black;
  margin: 5px 0;
  padding: 5px;
}

<div class="container">
  <div class="col">
    <div class="row">row 1 Compare text 1</div>
    <div class="row">row 2</div>
    <div class="row">row 3</div>
  </div>
  <div class="col">
    <div class="row">row 1 Compare text 1 this text is longer</div>
    <div class="row">row 2</div>
    <div class="row">row 3 with a little more text</div>
  </div>
  <div class="col">
    <div class="row">row 1 Compare text 1 this text is even much much longer</div>
    <div class="row">row 2</div>
    <div class="row">row 3</div>
  </div>
</div>