Move last element to next row

by bhatnagar018

HTML

<div id="container">
    <div class="item">1. item jjj jj</div>
    <div class="item">2. item dfdf</div>
    <div class="item">3. item</div>
    <div class="item">4. item</div>
    <div class="item">5 column item</div>
    <div class="item">6. itedfdfdfdf dffdfd fddfm</div>
    <div class="item">7. itemdffd gffg fgfgfg</div>
    <div class="item">7. item</div>
    <div class="item">8.itemdsds dffd</div>
    <div class="item">9. itedfdf df df dfdfdfm</div>
    <div class="item">10. itedfdf df df dfdfdfm</div>
</div>

CSS

#container {
    background-color:gray;
    position:relative;
    top: 10px;
    left:0px;
    height:500px;
}
.item {
    background-color:green;
    position:absolute;
    height:50px;
    top: 0px;
    left:0px;
    margin-right:10px;
    margin-bottom:10px;
}

JavaScript

$(function () {
    // Handler for .ready() called.
    var rows = 5
    var items = $("#container").children()
    var firstDiv = $("#container").children().eq(0)
    var height = firstDiv.height()
    var margin_bottom = firstDiv.outerHeight(true) - firstDiv.innerHeight()
    var margin_right = firstDiv.outerWidth(true) - firstDiv.innerWidth()
    var row = 0
    var index = 0

    items.each(function () {

        var leftPos = 0
        if (index >= rows) {
            var siblingDiv = $("#container").children().eq(index - rows)
            if (index == 10) {}
            leftPos = siblingDiv.width() + siblingDiv.position().left + margin_right
        }
        var topPos = ((height + margin_bottom) * row)

        $(this).css('top', topPos + 'px')
        $(this).css('left', leftPos + 'px')
        row += 1
        index += 1
        if (row >= rows) {
            row = 0
        }
    })

});