4回答

• 

  qq_Jabo

  2016-11-13 11:02:11

  已采纳

  思路：获取container的高宽，根据这个控制Math.random()的值作用与每张图片的top、left值，再随机设置个rotate的值

  0 0
• 

  qq_Jabo

  2016-11-14 00:13:31

  修改一下：

  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的宽度

  
  

  0 1
• 

  慕斯卡3531659

  2016-11-13 19:36:43

  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列  然后最下面只有两个

  0 0
• 

  慕斯卡3531659

  2016-11-13 18:53:11

  如何才能均匀的显示

  我发现不能均匀显示

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

  
  

  0 0