有问题来计算砌体网格中的每个div顶部和左侧位置

Question

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

这是我的Jsfiddle demo

这里是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方法获取top，right，bottom，left值

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

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