在动态视图中选择最大列的策略？

Question

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

我需要它来选择最长的div并将其作为指导，从哪里开始下一行。

Trick是，根据屏幕的宽度，列数可以是从1到非常大的任何位置。

Answer 1

  

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

您可以遍历文档中的所有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>