random 图像的位置

我找到了一个脚本 divs / 图像随机。 但是,这并不像我想要的那样/我需要。

图像加载每个 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="[url=https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>]https://ajax.googleapis.com/aj ... gt%3B[/url]
<img src="//placehold.it/1x5000"/> Placeholder image to show issue
<div class="circle">
<img src="[url=http://static.tumblr.com/tensqk8/k8anq0438/01.png"/>]http://static.tumblr.com/tensq ... gt%3B[/url]
</div>
<div class="circle">
<img src="[url=http://static.tumblr.com/tensqk8/k8anq0438/01.png"/>]http://static.tumblr.com/tensq ... gt%3B[/url]
</div>
已邀请:

詹大官人

赞同来自:

尝试移动你的 position//; 打电话 $/窗户/。下载功能。

我认为,或许,在加载所有图像之前,图像都已定位,因此页面变短。

江南孤鹜

赞同来自:

无需依赖性清洁和可读的解决方案 jQuery 也许是那样的东西。 这避免了您的图像的不必要的包装 divs, 将图像本身定位。 它包括一个隐藏的元素作为一种 "poor man's"
http://www.html5rocks.com/en/t ... wdom/
.

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++ #fed;="" #x="" 'load',init="" .icon="" 2;="" 3px="" 400px;="" ;="" ;[="" [code]<h1="" [code]body="" absolute;="" background-color:="" border:="" code]="" createimage="" gray;="" height:="" position:="" relative;="" solid="" white;="" window,document="" window.addeventlistener="" z-index:="" {="" }="" };="" }[="">Randomly distributed images
<div id="x"></div>
<img class="icon" hidden="hidden" id="template" src="#">


</img></total_number_of_images;i++>

要回复问题请先登录注册