上一节照片墙 个人认为 如果每张照片设置 角度 和 位置 未免 太繁琐
上一节照片墙
个人认为 如果每张照片设置 角度 和 位置 未免 太繁琐 能不能 用 js 实现
有人做出来的话希望 分享一下代码
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;//角度偏差
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);
}
}举报
0/150
提交
取消
