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

我已经创建了网格画廊，每个div都有不同的宽度和高度。我想把这个画廊建成砖石结构

这是我的

下面是一段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();
});

函数posit（）{
$（“.sli”）.css（{“位置”：“相对”}）；
var k=0；
总长度=$（“.sli1”）。长度；
if（k您可以使用这段代码。我使用这个方法来获取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);
    });

要获取每个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++;

if（k当我应用position-absolute时，这不起作用，这里是jsfiddle链接这是设置CSS样式的正确方法：$（This）.CSS（“属性”，“值”）；所以现在我更新了你的代码：。有重叠的问题，请检查。我想要类似的输出（）@simpleclick嗨，我更新了你的代码。这是你想要的吗？请查看屏幕截图