Javascript 在div中显示绝对定位的图像

我试图将图像绝对定位在div内的随机位置。我不确定如何正确计算“top”和“left”，但有时图像显示在div外。我还希望防止图像重叠

任何想法都会有帮助

（函数（）{
//指向图像的链接数组
变量图像=[”http://via.placeholder.com/150/800",
"http://via.placeholder.com/150/080",
"http://via.placeholder.com/150/008",
"http://via.placeholder.com/150/880"
];
//函数来计算一个随机整数
var getRandomInt=函数（最小值、最大值）{
返回Math.floor（Math.random（）*（max-min+1））+min；
}
//函数获取每个图像的顶部和左侧值位置
var pos=函数（）{
var wrapWidth=document.getElementById（“wrap”）；
wrapWidth=$（“#wrap”）.width（）；
wrapHeight=$（“#wrap”）.height（）；
//图像位置
var xPos=getRandomInt（0，wrapWidth-150）；
var yPos=getRandomInt（0，wrapHeight-150）；
返回{
x:xPos+“px”，
y:yPos+“px”
}
}
var displayImages=函数（图像）{
var elementArray=[]；
对于（var i=0；i

交互树
我假设您有一些类似的css：

img {
    position: absolute;
    width:150;
    height:150;
}

关于第一个问题，在将元素添加到数组的位中，您的
x
和
y
赋值向后。此外，您对
pos（）
的调用次数是需要的2倍

这条线应该是：

let position = pos();
elementArray[i] = '<img class="imagePos" style="top:'+position.y+'; left:'+position.x+' " src="'+src+' "/>';

let position=pos（）；
elementArray[i]=''；

对于第二个问题，您需要检查每个图像的任何角是否与不同的图像重叠。实现这一点的简单方法是添加一个数组来跟踪已使用的位置，并与数组中的项目进行比较以进行后续位置计算

(function (){
//array of links to the images
var images = ["http://via.placeholder.com/150/800",
    "http://via.placeholder.com/150/080",
    "http://via.placeholder.com/150/008",
    "http://via.placeholder.com/150/880"
  ];

//function to calculate a random integer
var getRandomInt = function (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

// array to track previous positions of images
var positions = [];

//function to get a top and left value position for each image 
var pos = function (){

    var wrapWidth = $("#wrap").width();
    var wrapHeight = $("#wrap").height();

    // Image Position
    var xPos = getRandomInt(0, wrapWidth - 150);
    var yPos = getRandomInt(0, wrapHeight - 150);

    var overlapX = true;
    var overlapY = true;

    while(overlapX && overlapY) {
        overlapX = false;
        overlapY = false;

        for(var i = 0; i < positions.length; i++) {

            // check if x coord is inside previously placed image
            if ( (xPos > positions[i].x && xPos < positions[i].x+150) || 
                 (xPos+150 > positions[i].x && (xPos+150) < positions[i].x+150) ){
                overlapX = true;
            }

            // check if y coord is inside previously placed image
            if( (yPos > positions[i].y && yPos < positions[i].y+150) || 
                (yPos+150 > positions[i].y && yPos+150 < positions[i].y+150) ) {
                overlapY = true;
            }
        }
        if (overlapX) {
            xPos = getRandomInt(0, wrapWidth - 150);
        }

        if (overlapY) {
            yPos = getRandomInt(0, wrapHeight - 150);
        }
    }

    positions.push({x:xPos,y:yPos});

    return {
        x: xPos + "px",
        y: yPos + "px"
    }

}
var displayImages = function(images){
    var elementArray = [];
    for (var i = 0; i < images.length; i++) {
        var src = images[i];

    let position = pos();
    elementArray[i] = '<img class="imagePos" style="top:'+position.y+'; left:'+position.x+' " src="'+src+' "/>';
    }
    elementArray.forEach(function(element) {    
        $("#wrap").append(element);
    });
}
displayImages(images);
})();

（函数（）{
//指向图像的链接数组
变量图像=[”http://via.placeholder.com/150/800",
"http://via.placeholder.com/150/080",
"http://via.placeholder.com/150/008",
"http://via.placeholder.com/150/880"
];
//函数来计算一个随机整数
var getRandomInt=函数（最小值、最大值）{
返回Math.floor（Math.random（）*（max-min+1））+min；
}
//用于跟踪图像先前位置的数组
var头寸=[]；
//函数获取每个图像的顶部和左侧值位置
var pos=函数（）{
var wrapWidth=$（“#wrap”）.width（）；
var wrapHeight=$（“#wrap”）.height（）；
//图像位置
var xPos=getRandomInt（0，wrapWidth-150）；
var yPos=getRandomInt（0，wrapHeight-150）；
var重叠x=真；
var-y=true；
while（重叠x&重叠y）{
重叠x=假；
重叠=假；
对于（变量i=0；ipositions[i].x&&xPos位置[i].x&（xPos+150）positions[i].y&&yPos位置[i].y&&yPos+150<位置[i].y+150））{
重叠Y=真；
}
}
if（重叠x）{
xPos=getRandomInt（0，wrapWidth-150）；
}
如果（重叠）{
yPos=getRandomInt（0，wrapHeight-150）；
}
}
push（{x:xPos，y:yPos}）；
返回{
x:xPos+“px”，
y:yPos+“px”
}
}
var displayImages=函数（图像）{
var elementArray=[]；
对于（var i=0；i
是否有与此相关的CSS？事实上，没有任何东西是随机定位的。哇，非常感谢你，这两个问题都得到了解决，没有重叠，图像只显示在wrap div中