表示div内の絶対配置された画像

Question

div内のランダムな位置に絶対位置の画像を配置しようとしています。私は 'トップ'と '左'の計算を正しく行う方法はわかりませんが、時にはdivの外側に画像が表示されます。私はまた、画像の重複を防止したい。

すべてのアイデアは、私はあなたには、いくつかの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

役立つだろう：あなたの最初の問題については

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

を、あなたはあなたを持っているように見えます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); 
})();