random 图像的位置
我找到了一个脚本 divs / 图像随机。 但是，这并不像我想要的那样/我需要。
图像加载每个 div /什么，我认为不完美/. 我有关于 30 图片。
但他们被加载得很糟糕，而且
它也很糟糕。 图像主要从上面加载 /我认为没有考虑博客图像，所以他得到了没有图像的高度？/
所以我想要的：加载它们更精细地随机化，以便他们也击中了页面的底部
图像加载每个 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>
没有找到相关结果
已邀请:
2 个回复
詹大官人
赞同来自:
我认为，或许，在加载所有图像之前，图像都已定位，因此页面变短。
江南孤鹜
赞同来自:
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++>