Simple Jquery Masonry like script to arrange elements in vertical space

This is a Jquery script which places elements in optimal position based on available vertical and horizontal space.It arranges items in vertical column and width of vertical column is taken as width of first 'item' element.

If you have elements with 'float:left' property and if they are of different heights then arrangement looks like as following image.

But if you use this script then result looks like as follows. [ Elements are arranged in optimal position in vertical space.]

How to arrange elements in vertical space?

First create an parent element and assign a class="container" and assign class="item" to the child elements which will be arranged in vertical space.

<!-- HTML -->
<div class="container">
    <div class="item">1.</div>
    <div class="item wv">2.</div>
    <div class="item w">3.</div>
    <div class="item wv">4.</div>
    <div class="item wv">5.</div>
    <div class="item">6.</div>
    <div class="item w">7.</div>
</div>

Now provide some CSS for above elements.

/* --- CSS --- */
.item {
    display:block;
    width:80px; 
    margin:5px;
    background:grey;
    min-height:30px;
    float:left;
    position:relative;
    border:1px solid green;
}
/* classes for variation in height*/
.w {
    min-height:40px; 
}
.wv {
    min-height:50px;
}

And here comes over final Jquery Script.Note: this script arranges items in vertical column and width of vertical column is taken as width of first 'item' element, change accordingly if you want.

<!-- JavaScript -->
$(function () {


    $('.item').css('position', 'absolute');
    rearrange();
    $(window).resize(function () {
        rearrange();
    });



    function rearrange() {


        var ti = $('.item').length; //total number of items
        var cw = $('.item').first().outerWidth(true); //column width
        var mr = parseInt($('.item').first().css("marginLeft"), 10); //margin left
        var mt = parseInt($('.item').first().css("marginTop"), 10); //margin top
        var contw = $('.container').width(); //container width

        if (contw < cw) {
            return; // if column width is greater then available space.
        }

        var pl = Math.floor(contw / cw); // no. of items per line

        for (i = 1; i <= ti; i++) {
            var upElement = (i - pl);
            var left = (i % pl);
            var leftv = 0;
            if (left == 0) {
                leftv = ((pl - 1) * cw) + mr;
            } else {
                leftv = ((left - 1) * cw) + mr;
            }

            if (upElement > 0) {
                var upELem = $('.item:nth-child(' + upElement + ')');
                var upTop = upELem.position().top;
                var upH = upELem.outerHeight(true);

                $('.item:nth-child(' + i + ')').css({
                    top: (upTop + upH),
                    left: leftv
                });

            } else {
                $('.item:nth-child(' + i + ')').css({
                    top: mt,
                    left: leftv
                });
            }
        }

    }
})();

To view live demo, click here. (Change window size to view horizontal arrangement.)
This script is inspired by already available jquery plugin, Jquery Masonry.

Did you find this post useful? Let Us know in the comments section below.

Posted in: script, Tutorial