局部变量的生命周期问题，你score定义在example里不能在main里被使用 你可以选择讲score定义为全局变量或者设置回调函数

sdwcekifwevfmui

修改一下：

var tempX =  5;

var tempY =2;

var blockWidth = cWidth / tempX;

 pics[i].style.left = blockWidth*Math.random()/2 + blockWidth*jx + "px";

如果要使用：

 var tempX =  Math.ceil(cWidth / pics[0].offsetWidth);

也可以得注意控制image的宽度

window.onload = function  () {
	var pics = document.getElementsByClassName("pic");
	var len = pics.length;
	var container = document.getElementsByClassName("container")[0];
	var cWidth = container.offsetWidth;
	console.log(cWidth);
	var cHeight = container.offsetHeight;
	var temp;//角度偏差
	var tempX =  Math.ceil(cWidth / pics[0].offsetWidth);
	var tempY =Math.ceil( cHeight /  pics[0].offsetHeight);
	console.log(tempX)
	for(var i=0;i<len;i++){
		temp = Math.ceil(Math.random()*20*Math.pow(-1,Math.ceil(Math.random()*10)));
		var jx = (i) % (tempX);
		var jy = Math.floor((i)/tempX);
		
		pics[i].style.left = temp+jx*(pics[0].offsetWidth-30)+"px";
		
		pics[i].style.top = temp+jy*(pics[0].offsetHeight)+"px";

		pics[i].style.WebkitTransform = 'rotate('+temp+'deg)';
		pics[i].style.transform = 'rotate('+temp+'deg)';
	}
}

觉得很丑 10张张照片显示出来  三行4列  然后最下面只有两个

如何才能均匀的显示

我发现不能均匀显示

window.onload = function  () {
	var pics = document.getElementsByClassName("pic");
	var len = pics.length;
	var container = document.getElementsByClassName("container")[0];
	var cWidth = container.offsetWidth;
	console.log(cWidth);
	var cHeight = container.offsetHeight;
	var temp;
	for(var i=0;i<len;i++){
		pics[i].style.top = Math.ceil(Math.random()*cHeight)+"px";
		pics[i].style.left = Math.ceil(Math.random()*cWidth)+"px";
		temp = Math.ceil(Math.random()*20);
		pics[i].style.WebkitTransform = 'rotate('+temp+'deg)';
		pics[i].style.transform = 'rotate('+temp+'deg)';
		console.log(pics[i].style.top);
	}
}