jQuery計算div中換行符的數量？

Question

所以我有一個div wrap其大小是屏幕寬度的百分比。在wrap裏面有多個.item divs。隨着窗口變小，它顯然會分裂成新的線條。

我寫了一些代碼，基本上採用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(); 
     } 
    }); 
});