javascript - 图像的随机位置

Question

我发现了一个可以随机定位 div/图像的脚本。但是，它并没有完全按照我想要/需要的方式工作。

每个图像都加载在一个 div 中(我猜这并不理想)。我有大约 30 张图像。

但是它们加载得不好并且 var posy = (Math.random() * ($(document).height() - 0)).toFixed();也不太好用。图像主要加载在顶部(我认为博客中的图像不算在内，因此它会获得没有图像的高度？)

所以我想要的是:更好地加载它们 随机化它们，以便它们也到达页面底部

var circlePosition = document.getElementsByClassName('circle');
console.log(circlePosition);

function position() {
  for (var i = 0; i < circlePosition.length; i++ ) {
    //give circle a random position
    var posx = (Math.random() * ($(document).width() - 0)).toFixed();
    var posy = (Math.random() * ($(document).height() - 0)).toFixed();



    //apply position to circle
    $(circlePosition[i]).css({
      'position':'absolute',
      'left':posx+'px',
      'top':posy+'px',
    })
  } 
} //end function position

var circleTotal = circlePosition.length;

$('.circle').click(function() {
  $(this).fadeOut();
  circleTotal = circleTotal - 1;
  console.log(circleTotal);

  if(circleTotal == 0) {
    position()
    $('.circle').fadeIn();
  }

});

position();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="//placehold.it/1x5000"> <!-- Placeholder image to show issue -->
<div class="circle">
  <img src="http://static.tumblr.com/tensqk8/k8anq0438/01.png">
</div>
<div class="circle">
  <img src="http://static.tumblr.com/tensqk8/k8anq0438/01.png">
</div>

Answer 1

一个干净、可读且不依赖 jQuery 的解决方案可能是这样的。它通过定位图像本身来避免不必要地将图像包装在 div 中。它包含一个隐藏元素，作为一种“穷人的”shadow DOM .

http://jsfiddle.net/sean9999/yv9otwr7/9/

;(function(window,document,undefined){
    "use strict";
        var init = function(){    
            var canvas = document.querySelector('#x');
            var icon_template = document.querySelector('#template');
            var icon_width = 40;
            var icon_height = 30;
            var the_images = [
                'http://static.tumblr.com/tensqk8/k8anq0438/01.png',
                'http://static.tumblr.com/tensqk8/rYanq05el/04.png',
                'http://static.tumblr.com/tensqk8/SYknq05py/05.png',
                'http://static.tumblr.com/tensqk8/s7inq057d/03.png'
            ];
            var pickRandomImage = function(){
                var i = Math.floor( Math.random() * the_images.length );
                return the_images[i];
            };
            var total_number_of_images = 10;
            var max_height = canvas.offsetHeight - icon_height;
            var max_width = canvas.offsetWidth - icon_width;
            var randomCoordinate = function(){
                var r = [];
                var x = Math.floor( Math.random() * max_width );
                var y = Math.floor( Math.random() * max_height );
                r = [x,y];
                return r;
            };
            var createImage = function(){
                var node = icon_template.cloneNode(true);
                var xy = randomCoordinate();
                node.removeAttribute('id');
                node.removeAttribute('hidden');
                node.style.top = xy[1] + 'px';
                node.style.left = xy[0] + 'px';
                node.setAttribute('src',pickRandomImage());
                canvas.appendChild(node);
            };
            for (var i=0;i<total_number_of_images;i++){
                createImage();
            };
        };
       window.addEventListener('load',init);
})(window,document);

body {
    background-color: #fed;
}

#x {
    border: 3px solid gray;
    background-color: white;
    height: 400px;
    position: relative;
}

#x .icon {
    position: absolute;
    z-index: 2;
}

<h1>Randomly distributed images</h1>

<div id="x"></div>

<img src="#" class="icon" hidden="hidden" id="template" />