디스플레이 div 내 절대 위치 이미지

Question

div의 임의의 위치에 절대 위치 이미지를 표시하려고합니다. 나는 '상단'과 '왼쪽'에 대한 계산을 올바르게하는 방법을 모르지만 때로는 이미지가 div 외부에 표시됩니다. 나는 또한 이미지의 중첩을 방지하고 싶다. 당신이 당신을 가지고있는 것 같습니다 첫 번째 문제에 관해서는

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

:

모든 아이디어를 일부 CSS를이를 닮은 가지고

(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

내가 있으리라 믿고있어 도움이 될 x 및 y 배열에 elems를 추가 할 비트에서 뒤로 지정합니다. 또한 필요에 따라 pos() 번으로 2 번 전화를 걸 수 있습니다.

라인이되어야한다 : 두 번째 문제를 들어

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