元素向左浮动时如何获取列数

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>

我正在尝试找出使用 JavaScript 或 jQuery.

计算列数（上例中为 4）的最简单方法

有没有更简单的方法？

（元素的数量会有所不同，有媒体查询会改变columns/rows的数量）。

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>

话虽如此，您的初始解决方案工作得很好，所以我真的看不出有任何理由放弃它。

元素向左浮动时如何获取列数

How to get the number of columns when elements are floated left

javascript

css

jquery

css-float