在计算砌体网格中每个div的顶部和左侧位置时遇到问题

Question

I Have creating grid gallery where each div has different width and height. I want to make this gallery like masonry.

Here is my Jsfiddle demo

here is snippet of java script code

function posit(){
    $(".sli").css({"position":"relative"});
    var k=0;
    total = $(".sli1").length;

    if(k<total){
        $(".sli1").each(function(){

//          alert(k++);
        //  var selectpos = selectedItems.position();
            $(this).css({"position":"absolute"});
            var c = $(this).position();
            console.log((k) + ':' + c.left);
            var d = $(this).outerWidth();
            $(this).css({"left": (c.left)});
            $(this).css({"top": (c.top)});
        });
    }k++;

};

$(document).ready(function(){
    posit();
});

Can some one help to calculate each div right top and left position so i can create masonry? Please note:- I don't want to use any plugin . Thankx in advance.

Updated Here is screenshot How I want my Output

Answer 1

You can use this code. I used getBoundingClientRect method to get top,right,bottom,left values

I modified your code a bit. Please check if this works for you.

$(".sli1").each(function(){
        var i = $(this);
        i.css({"position":"absolute"});
        var c = i.get(0).getBoundingClientRect();                       
        console.log(c.top,c.left,c.bottom,c.right);
    });

Answer 2

To get the position of each div, please see below:

if(k<total){
    $(".sli1").each(function(){

    var c = $(this)[0];
    // now you can get the position you want for each of the div as follows:

    console.log("Top: " + c.offsetTop);
    console.log("Left: " + c.offsetLeft);

    //the rest of the code

    });
}k++;