Question

我试图在div内的随机位置绝对定位图像。我不确定如何正确计算“＃top;＆＃39;并且＆＃39;离开＆＃39;但有时会在div之外显示图像。我也希望防止图像重叠。

任何想法都会有所帮助

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

我假设您有一些类似于此的CSS：

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

关于您的第一个问题，您似乎将x和y分配向后添加到您将数组添加到数组中的位。此外，您根据需要拨打pos()的电话次数是其中的两倍。

那一行应该是：

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

对于第二个问题，您需要检查每个图像是否有任何角重叠不同的图像。通过添加数组来跟踪您已经使用的位置，并与数组中的项目进行比较以进行后续位置计算，可以轻松实现此目的。

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

显示div内的绝对定位图像

1 个答案: