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