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

Question

我正在尝试将图像绝对定位在 div 内的随机位置。我不确定如何正确计算“顶部”和“左侧”，但图像有时会显示在 div 之外。我还想防止图像重叠。

任何想法都会有所帮助

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

  //function to get a top and left value position for each image 
  var pos = function() {
    var wrapWidth = document.getElementById("wrap");
    wrapWidth = $("#wrap").width();
    wrapHeight = $("#wrap").height();

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


    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];
      elementArray[i] = '<img class="imagePos" style="top:' + pos().x + '; left:' + pos().y + ' " src="' + src + ' "/>';
    }
    console.log(elementArray);
    elementArray.forEach(function(element) {

      console.log(element);
      $("#wrap").append(element);
    });
  }
  displayImages(images);
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="IntTree">
  <div id="header">
    <h1>Interactive Tree</h1>
  </div>
  <div id="wrap">

  </div>
</div>

Answer 1

我假设你有一些类似这样的 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+' "/>';

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

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