为了账号安全,请及时绑定邮箱和手机立即绑定

圆形分布做出来了,但是不知道如何优化,怎么调整显示的时候不重叠,或者重叠少一点,均匀重叠。求指点

https://img1.sycdn.imooc.com//5c06340d00012d0e14400810.jpg

如何 均匀重叠 或者说 不重叠

正在回答

1 回答

我这里提供一个方法,

如果要实现均匀分布,这里不能用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,导致全部重叠(这里应该还有其他的方法解决这个问题但我还没想到)。

这样就到均匀分布了,但有一个问题是   点击元素时并不一定会全部重新排列位置。

//前端新手,欢迎指正。。

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

举报

0/150
提交
取消

圆形分布做出来了,但是不知道如何优化,怎么调整显示的时候不重叠,或者重叠少一点,均匀重叠。求指点

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信