JQuery рассчитать количество разрывов строк в div? ⇐ Html

[Anonymous]

У меня есть div-обертка, размер которой равен проценту ширины экрана. Внутри этой оболочки находится несколько элементов div .item. Когда окно становится меньше, оно, очевидно, разбивается на новые строки.
Я написал код, который по сути берет ширину обтекания и делит ее на сумму ширин полей .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:




Computer Science
Language
Marketing
Biology
Computer Science
Language
Marketing
Biology
Computer Science
Language
Marketing
Biology
Computer Science
Language
Marketing
Biology




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


Подробнее здесь: https://stackoverflow.com/questions/452 ... s-in-a-div