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

Question

我有创建网格画廊，其中每个div具有不同的宽度和高度。 我想让这个画廊像砖石一样。

这是我的Jsfiddle演示

这是Java脚本代码的片段

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

有人可以帮忙计算每个div的右上角和左上角的位置，以便我可以创建砌体吗？ 请注意：-我不想使用任何插件 。 提前感谢。

更新，这里是屏幕截图我想要我的输出

Answer 1

您可以使用此代码。 我使用getBoundingClientRect方法获取顶部，右侧，底部，左侧的值

我修改了您的代码。 请检查是否适合您。

$(".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

要获取每个div的位置，请参见以下内容：

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