0

I am displaying images using JavaScript code in the HTML section element. Below is my code:

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>

By default images are getting displayed one below the another. But my question is if the image position ie. x and y coordinates are provided, can we display images on that position using HTML, CSS and JavaScript? Is there any way?

Rachel Gallen
  • 27,943
  • 21
  • 72
  • 81
Varsh
  • 413
  • 9
  • 26
  • What do you mean by coordinates? Do you already have added specific location to HTML pages? – Mangesh Sathe Apr 22 '19 at 08:30
  • otherwise you can check SVG positioning here, https://stackoverflow.com/questions/479591/svg-positioning – Mangesh Sathe Apr 22 '19 at 08:31
  • No, I haven't added any specific location to HTML Pages. Coordinates means (x,y) position of the image. – Varsh Apr 22 '19 at 09:51
  • so you just want to bring up the some part of image? – Mangesh Sathe Apr 22 '19 at 09:56
  • you can try https://www.w3schools.com/cssref/pr_pos_clip.asp – Mangesh Sathe Apr 22 '19 at 09:59
  • currently, when I append section element with images they are displaying one below the other automatically. but instead, I want to set the image on the given position which will be provided for each image. In short this is not canvas but should display like it. Is this possible? – Varsh Apr 22 '19 at 10:01
  • @Varsh do you mean you want them to display beside each other as opposed to one under the other? This could be resolved by display:inline-block? – Rachel Gallen Apr 23 '19 at 00:01
  • @Varsh your js has errors in it and you haven't shared the randomsize function? There are left, top right and bottom css properties which you can set (with percentages preferable to px) so yes you can specify where to place an image, it may prove to be a painstaking task with 300 images though. I would display inline-block /position relative and maybe add padding or a border to the image. Work from this (not all images are displayed due to site security reasons) https://jsfiddle.net/RachGal/nhjvzdpq/ – Rachel Gallen Apr 23 '19 at 01:35

0 Answers0