在给定位置显示图像

Question

我正在使用HTML section元素中的JavaScript代码显示图像。下面是我的代码：

window.onload = function() {

  var allImages = "";

  for (var i = 0; i < 298; i++) {
    var width = getRandomSize(200, 400);
    var height = getRandomSize(200, 400);

    allImages += '<img class="myImg"
    src = "http://lorempixel.com/"+width+'/'+height+'/sports"
    id = '+i+'
    _id alt = "pretty kitty" > ';
  }
  $('#photos').append(allImages);
};

#photos {
  /* Prevent vertical gaps */
  line-height: 0;
  -webkit-column-count: 20;
  -webkit-column-gap: 0px;
  -moz-column-count: 20;
  -moz-column-gap: 0px;
  column-count: 20;
  column-gap: 0px;
}

#photos img {
  width: 100% !important;
  height: auto !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
  <section id="photos"></section>
</div>

默认情况下，一个图像显示在另一个图像之下。但是我的问题是图像的位置是否。提供了x和y坐标，我们可以使用HTML，CSS和JavaScript在该位置显示图像吗？有什么办法吗？