圆形分布做出来了,但是不知道如何优化,怎么调整显示的时候不重叠,或者重叠少一点,均匀重叠。求指点
如何 均匀重叠 或者说 不重叠
如何 均匀重叠 或者说 不重叠
2018-12-04
我这里提供一个方法,
如果要实现均匀分布,这里不能用random()随机获得的数字来给每个元素的旋转角度赋值(圆形分布),也不需要分左右两部分了。假定你有x个元素要均匀分布,那么每两个元素之间的夹角就是180/x,然后用for in方法遍历,
for (n in imgs){
var img = imgs[n];
var x = imgs.length;
(function (deg){
var index = n; //获得索引值
img.style['transform'] = 'rotate('+-index*360/x+'deg) scale(.7) translateY(-1000px)';
})(n);
这里用了立即调用函数的方法来旋转每个元素,如果直接写 img.style['transform']的话,n的值在循环完成之后会赋值给所有的元素的rotate,导致全部重叠(这里应该还有其他的方法解决这个问题但我还没想到)。
这样就到均匀分布了,但有一个问题是 点击元素时并不一定会全部重新排列位置。
//前端新手,欢迎指正。。
举报