JSFiddle - React, Tailwind, and code Playground

by sptx457

CSS

img {
  width: 50px;
  height: auto;
}

JavaScript

$(document).ready(function() {
  var images_array = ["1", "2", "3", "4", "5", "6", "7", "8", "9"];
  var window_height = $(window).height() - 65;
  var window_width = $(window).width() - 65;
  var $new_div = $("<div>").html('<img src="http://sarah.educatedlabs.com/images/image' + images_array + '.png" />');
  var available_pixels = window_width * window_height; 
  var image_area = image_width * image_height; 
  
  var generate_random_left = function(width_available) {
      var number = Math.floor(Math.random() * width_available);
      return number;
  };

  var generate_random_top = function (height_available) {
      var number = Math.floor(Math.random() * height_available);
      return number;
  };

  for (var i = 0; i < images_array.length; i++) {
  	// placed inside loop to get data for all exisiting images
    var image_width = $('img').width();
    var image_height = $('img').height(); 
    var width_available = window_width; 
    var height_available = window_height; 
    var left = generate_random_left(width_available);
    var top = generate_random_top(height_available);
    var pixels = []; 
    
    // loops through array and creates images
    $new_div = $("<div>").html('<img src="http://sarah.educatedlabs.com/images/image' + images_array[i] + '.png" />');

    $('body').append($new_div); 
    
    // assign random positioning to each div
    $new_div.last().css({"position":"absolute","top": top, "left": left});
  }  
  // if div equals position, then block out position x that is the width of the existing image
  $(document).mouseover(function(position) {

  });
  
});