亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定

上一節照片墻 個人認為 如果每張照片設置 角度 和 位置 未免 太繁瑣

上一節照片墻 ?

個人認為 如果每張照片設置 ?角度 和 位置 未免 太繁瑣 能不能 用 ?js ?實現 ?

有人做出來的話希望 分享一下代碼

正在回答

4 回答

思路：獲取container的高寬，根據這個控制Math.random()的值作用與每張圖片的top、left值，再隨機設置個rotate的值

0 回復 有任何疑惑可以回復我~

修改一下：

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


1 回復 有任何疑惑可以回復我~ 
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 回復 有任何疑惑可以回復我~

如何才能均勻的顯示

我發現不能均勻顯示

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/150
提交
取消

上一節照片墻 個人認為 如果每張照片設置 角度 和 位置 未免 太繁瑣

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號