javascript - jQuery 计算一个 div 中的换行符数？

Question

所以我有一个div wrap，它的大小是屏幕宽度的百分比。在这个 wrap 里面是多个 .item div。随着窗口变小，它显然会换行。

我写了一些代码，基本上采用 wrap 的 width 并将其除以 .item 框的宽度总和.但缺陷在于，它在考虑总共可以容纳多少个盒子，是否可以像积木一样完美地混合和匹配它们，但这不是它的工作方式，因为排序停滞不前。

我怎样才能使这个逻辑起作用？

CodePen

jQuery:

var itemWidth = 0;
var lineCount = 1;


$(window).on('resize', function(){
  var lineWidth = $('.line').width();
  var itemWidthSum = 0;
  lineCount=1;

  $('.item').each(function(index, element) {
      if(itemWidthSum < (lineWidth - $(element).outerWidth())) {
        itemWidthSum = itemWidthSum + $(element).outerWidth();
      } else {
        lineCount++;
        itemWidthSum = 0;
      }
  });
});

HTML:

<div id="container">
  <div class="rect"> 
    <div class="line">
  </div>
    <div class="item">Computer Science</div>
    <div class="item">Language</div>
    <div class="item">Marketing</div>
    <div class="item">Biology</div>
    <div class="item">Computer Science</div>
    <div class="item">Language</div>
    <div class="item">Marketing</div>
    <div class="item">Biology</div>
    <div class="item">Computer Science</div>
    <div class="item">Language</div>
    <div class="item">Marketing</div>
    <div class="item">Biology</div>
    <div class="item">Computer Science</div>
    <div class="item">Language</div>
    <div class="item">Marketing</div>
    <div class="item">Biology</div>
</div>


 <h1 class="answer"></h1>

CSS:

body {
  padding:25px;
}

.answer {
  position:fixed;
  bottom:0;
  left:0;
}

#container {
  border: 1px solid rgb(200,200,200);
  height: auto;
  width: 30%;
  margin:0 auto;
}

.item {
  padding: 10px;
  background-color: #aef2bd;
  float: left;
}

.rect {
  height: 100px;
  width:100%;
  position: relative;
}

.rect .line {
  position:absolute;
  height:50px;
  width: 100%;
  bottom:0;
  border-top: 1px solid red;
}

Answer 1

通过调试每一步找出我的逻辑错误。

正确的 jQuery:

var itemWidth = 0;
var lineCount = 1;


$(window).on('resize', function(){
  var lineWidth = $('.line').width();
  var itemWidthSum = 0;
  var list = [];
  lineCount=1;

  $('.item').each(function(index, element) {
      if((lineWidth - itemWidthSum) > ($(element).outerWidth())) {
        itemWidthSum = itemWidthSum + $(element).outerWidth();
      } else {
        lineCount++;
        itemWidthSum = $(element).outerWidth();
      }
  });
});