JS CSS3实现了惊人的杂凑效果

先介绍一下我根据网上视频讲解实现的照片墙效果图。

最终的效果包括以下几个方面：当点击一张图片时，图片会移动到中间区域并被放大显示。点击图片，前后切换。当点击一张图片时，所有图片的位置会随机重新排列。当点击一个控制按钮时，相应的图片显示在中间，控制按钮切换相应的样式。当连续点击控制按钮时，随着按钮的点击，图片在正面和背面之间切换

整个效果用VCD分解，如下图所示：

用计算机能理解的方式分解案例。

视图视觉：HTML css基本界面模板Controller : Javascript内容处理和事件处理数据：data.js不需要，有助于理解

数据数据是非常常用的。如果内容是写给View的，也就是HTML的话，想要更改内容的时候就要修改HTML，但是如果使用VCD的话只需要修改数据部分。同时一般的数据都是在后台生成的，替换起来比较方便。这种情况下的海报都是由模板和数据生成的。

视图部分将效果区域分解为三个部分，如下所示：

当前显示的海报区域水平和垂直居中，并允许通过控制栏按钮进行控制。左和右存储区域被当前显示的海报区域分成左和右区域。作用是存放其他海报。每个海报位置都是随机的，角度也是随机的。控制栏区域控制相应海报翻转的显示，以切换当前显示海报的正面和背面

实现的html代码如下：

body on selectstart=' return false；'！-禁止在此处选择页面文本-！-2.将视图重写为模板字符串-div class=' wrap' id=' wrap '！- div.photo负责平移和旋转-div class=' photo-front ' onclick=' turn(this)' id=' photo _ { { index } } '！- div.photo-wrap负责来回翻转-div class=' photo-wrap ' div class=' side side-front ' P class=' image ' img src=' http : photo/{{img}} ' alt=' '/P class=' caption ' { caption } }/P/div class=' side side-back ' P class=' desc ' { desc } }/P/div/div/div在此处{ { img } }、{{caption}}、{{desc}。视图部分具有以下样式：

style type=' text/CSS ' * { padd :0；margin:0} body { background-color : # fff；color: # 555font-family:'Avenir Next '，'兰亭黑SC '；font-size :14 px；-moz-font-smooth :抗锯齿；-web kit-font-smooth :抗锯齿；/*字体平滑*/}。换行{ //图片区域在正文中垂直居中，宽度为：100%；高度：900 px；位置：绝对；/*-margin-top :-300 px；/* *-bottom :0；margin-top : auto；边距-bottom : auto；/* - */底色-color : # 333；飞越：隐藏；-moz-perspective :800 px；-web kit-perspective :800 px；//让子元素得到3D元素支持，这里是从视图中设置子元素的位置}/*海报样式*/。照片{ width:260px高度：320 px；/*因为每张海报都用top和l。