如何计算其父元素第一行的元素数量

Question

我的问题是，有没有一种方法可以在 JavaScript 中确定有多少子元素将适合父元素的第一行？然后，我会将其乘以固定数量的行，并一次查询那么多行。

为了更好地理解发生了什么，如果我查询 20 个项目并且页面大小使得每行可以容纳 6 个元素，我将在最后一行留下两个空格。我想查询足够多的内容，以便最后一行没有空单元格。

页面在这里：http://www.spacerock.com/dvds.php

我正在尝试找出一种绝妙的方法来动态执行此操作，并根据页面大小调整数字。

Answer 1

好吧，我想我现在更了解你了。试试这个代码。按原样运行并观察计数，然后进入全屏模式并再次运行。

$(document).ready(function(){
   
    function countFirstRowItems(parentSelector, childSelector){
        var count = 0, theTop = undefined;
        $(parentSelector + " > " + childSelector).each(function(){
            var thisTop = $(this).offset().top;
            if(theTop === undefined){
                theTop = thisTop;
            }
            if(thisTop != theTop){
                return false;
            }
            count++;
        });
        return count;
    }
    
    $('#btnCount').click(function(){
        $('#spnCount').html(
            countFirstRowItems('.outer', '.item')
        );
    });

    $('#spnCount').html(
        countFirstRowItems('.outer', '.item')
    );
    
});

.outer{
  padding:.5em;
  margin:.5em;
  box-shadow:inset 0px 0px 3px #aaa;
}
.item{
  margin:.5em;
  height:150px;
  width:100px;
  border:solid 1px #ddd;
  float:left;
  background-color:#fdfafa;
}
.clearfix{
  clear:both;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnCount">Count items on first row</button>
<span id="spnCount">?</span>
<div class='outer'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  
  <div class='clearfix'></div>
</div>