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

尝试移动你的位置（）;在$（window）.load函数内调用。

我想也许图片在所有图片加载之前都已定位，因此页面会缩短。

Answer 2

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

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

＆＃13;

;(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);

＆＃13;

body {
    background-color: #fed;
}

#x {
    border: 3px solid gray;
    background-color: white;
    height: 400px;
    position: relative;
}

#x .icon {
    position: absolute;
    z-index: 2;
}

＆＃13;

<h1>Randomly distributed images</h1>

<div id="x"></div>

<img src="#" class="icon" hidden="hidden" id="template" />

＆＃13;

图像的随机位置

2 个答案: