ダイナミックビューで最大の列を選ぶ戦略？

Question

私はこの階段ケースの効果があります。これは、ブラウザが最後のdivの下に余分なdivを挿入するためです。

私はそれが最も長いのdivを選択し、次の行を開始する場所として、ガイドラインとしてそれを使用する必要があります。

トリックは、画面の幅に応じて、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>