Question

这是简化案例：

＆＃13;

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);

＆＃13;

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

＆＃13;

<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>

＆＃13;

我试图找出使用JavaScript或jQuery计算列数（上例中为4）的最简单方法。

有更简单的方法吗？

（元素数量会有所不同，有些媒体查询会改变列数/行数。）

Answer 1

如果你将div包装在一个外部容器中，你可以对它们进行数学运算，看看它们的数量是多少。像这样：

＆＃13;

var oWidth = $('.outer').width();
var iWidth = $('.inner').outerWidth(true);

$('#display').text(oWidth / iWidth);

＆＃13;

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

＆＃13;

<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>

＆＃13;

话虽如此，你的初步解决方案运作得很好，所以我真的没有理由放弃它。

如何在元素浮动时获取列数

1 个答案: