badcyc / gallery Goto Github PK

效果预览

灵感来源

• 图片随机排布的实现： 图片元素绝对定位，通过刷新或点击事件触发图片重新排列，随机产生图片元素css属性left(right)、top的值，实现每次排列都产生图片的随机位置，只要控制left(right)、top值产生的范围，使图片排布在规定的范围内，在产生随机位置的同时给一个随机旋转角度，实现图片排布的随机样式。
• 图片旋转、翻转的实现： 通过CSS 3的新特实现了3D视图、翻转隐藏、旋转位移和过渡效果等。如backface-visibility: hidden设置了当元素不面向屏幕时隐藏，transform: translate(x,y) rotate(0deg)定义元素的位移以及旋转角度，transform-style :preserve-3d支持了子元素的3D效果，preserve: 800px设置了3D元素距本身视图的距离。
• 通过字符串替换实现简易的模板功能： 通过replace()方法,替换在html中写的特殊字符{{}},批量渲染了页面中的图片内容。
• 解决页面内容分布均匀问题： 将所有图片数据分成两组随机数量的数组，一组设置left值，一组设置right值，使页面内容在左右分区均匀分布。

• Chrome和Firefox下效果最佳，safari下图片重排列效果存在抖动问题，仍在查找兼容方案
• 若photo back面的内容过多，会导致图片翻转过程中图片偶发的短暂消失，翻转完成后出现，所以设置overflow：hidden
• 代码过于笨重，需简化