Question

我正在尝试将5张图片随机放在名为“leftSide”的div上，width＆amp; height '500px' img有width＆amp; height'100px'所以我试图在它适合div的范围内生成5个图像。

我认为这是所有相关的代码：

numberOfFaces = 5
var theLeftSide = document.getElementById("leftSide");
while (numberOfFaces > 0) {
    var img = document.createElement('img');
    img.src = "smile.png";
    valueTop = Math.floor(Math.random() * 400);
    valueL = Math.floor(Math.random() * 400);
    img.style.top = valueTop + 'px';
    img.style.left = valueL + 'px';
    theLeftSide.appendChild(img);
    numberOfFaces -= 1;

我很感激任何想法，我可能做错了以及如何解决它。谢谢！这应该在没有像jQuery

这样的库的情况下解决

Answer 1

您需要添加

img.style.position = 'absolute';

每个插入的图像。

对于leftSide这个：

<div id="leftSide" style="position: relative;">...

＆＃13;

var numberOfFaces = 5;
while (numberOfFaces--) {
    var img = document.createElement('img');
    img.src = "http://lorempixel.com/50/50/cats/" + numberOfFaces;
    var valueTop = Math.random() * 400 | 0;
    var valueL = Math.random() * 400 | 0;
    img.style.top = valueTop + 'px';
    img.style.left = valueL + 'px';
    img.style.backgroundColor = '#0000ff';
    img.title = 'left: ' + valueL + ' top: ' + valueTop;
    img.style.position = 'absolute'; // <--------------------------------------- add this!
    document.getElementById('leftSide').appendChild(img);
}

＆＃13;

<div id="leftSide" style="position: relative; padding: 0; border: 0; width: 500px; height: 500px; background-color: #ffff00;">

＆＃13;

Answer 2

这就是我的表现。

＆＃13;

$(document).ready(function() {
  var imgCre, postop, posleft,posTopArray=[],posLeftArray=[];
  for (var i = 0; i < 5; i++) {
    postop = Math.floor((Math.random() * 400) + 1);
    posleft = Math.floor((Math.random() * 400) + 1);
    posTopArray[i] = postop;
    posLeftArray[i]= posleft;
     for(var j= 0;j<i;j++){
       
       if(posTopArray[j]==postop)
         postop = Math.floor((Math.random() * 400) + 1);//new random position if any of old position match with new
         
     }
    imgCre = "<img src='http://lorempixel.com/100/100/' style='width:100px; height:100px; position:absolute; top:" + postop + "px; left:" + posleft + "px'>";
    $("#imaggeContainer").append(imgCre);
  }
});

＆＃13;

body {
  margin: 0px;
  padding: 0px;
  background-color: #555;
}
#imaggeContainer {
  width: 500px;
  height: 500px;
  border: 5px solid #f9d899;
  background-color: #999;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="imaggeContainer">
  <div>

＆＃13;

使用javascript生成随机放置的图像

2 个答案: