javascript - 在动态 View 中选择最大列的策略？

Question

我有这个楼梯效果，因为浏览器会在最后一个 div 下方插入一个额外的 div，如果它适合的话。

我需要它来选择最长的 div 并将其用作下一行开始位置的指南。

诀窍是，列的数量可以是从 1 到很大的任意值，具体取决于屏幕的宽度。

Answer 1

I need it to pick the longest div and use that as guideline as where to start the next row.

可以循环遍历文档中的所有div，找到最长的div如下:

height = "0px";
var all_div = document.getElementsByTagName('div');

for (var x = 0; x < all_div.length; ++x) {
  if (getComputedStyle(all_div[x]).height > height)
    height = getComputedStyle(all_div[x], null).height;
}
console.log("the div width longest height is", height);

div {
  border: solid green;
  background: red;
  display: inline-block;
  width: 100px;
}

.d:nth-child(1) {
  height: 100px;
}

.d:nth-child(2) {
  height: 500px;
}

.d:nth-child(3) {
  width: 50px;
  height: 50px;
}

.d:nth-child(4) {
  height: 700px;
}

<div class="d">100px</div>
<div class="d">500px</div>
<div class="d">50px</div>
<div class="d">70px</div>