要素が左浮かべているとき

Question

これで減少した場合、列の数を取得する方法：

var columns = null, 
 
    firstPositionTop = $('div').eq(0).offset().top; 
 

 
$('div').each(function(index) { 
 

 
    var thisPositionTop = $(this).offset().top; 
 

 
    if (thisPositionTop !== firstPositionTop && columns == null) { 
 

 
    columns = index; 
 

 
    } 
 

 
}); 
 
console.log(columns);

div { 
 
    width: 15%; 
 
    padding-bottom: 15%; 
 
    margin: 5%; 
 
    background: DeepPink; 
 
    float: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div>

私は列の数を計算する最も簡単な方法を把握しようとしています（上記の例では4）をJavaScriptまたはjQueryを使用して作成します。

もっと簡単な方法はありますか？

（要素の数が変化し、列/行の数を変更しますメディアクエリが存在します）。

Answer 1

あなたが外容器にdivをラップする場合は、収まるどのように多く見るためにそれらに数学を行うことができます。言われて、あなたの最初のソリューションが正常に動作しますので、私は本当にそれを放棄する理由を見ていないことを

var oWidth = $('.outer').width(); 
 
var iWidth = $('.inner').outerWidth(true); 
 

 
$('#display').text(oWidth/iWidth);

.inner { 
 
    width: 15%; 
 
    padding-bottom: 15%; 
 
    margin: 5%; 
 
    background: DeepPink; 
 
    float: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<p id="display"></p> 
 
<div class="outer"> 
 
<div class="inner"></div> 
 
<div class="inner"></div> 
 
<div class="inner"></div> 
 
<div class="inner"></div> 
 
<div class="inner"></div> 
 
<div class="inner"></div> 
 
<div class="inner"></div> 
 
<div class="inner"></div> 
 
</div>

：このような何か。