优化：图片加载后立即设置top值，且全部加载完毕添加事件。

预览图的倒影

预览图的倒影

适合单栏布局

分析

视觉界面分析

css3:

javascript:

倒影

-webkit-box-reflect:below 0px;//添加倒影

添加遮罩

-webkit-gradient(

linear,//线性遮罩

left top,//从左上开始

left bottom，//到左下结束

form(transparent),//起始颜色为透明色

color-stop(50%,transparent),//中间位置颜色50%的透明色

to(rgba(255,255,255,0.3))//结束位置为3%的白色

);

opacity：0；opacity:1;//设置透明度

渐变动画；-webkit-transition:all .2s

eg:-webkit-transition:all .8s 1s;//动画时间8秒，延迟1秒

设预览图倒影

VCD分析法(视觉、控制、数据)

垂直居中margin-top：-1*height/2，top：50%即可

倒影css样式

预览图的倒影语法4：31

1.字体颜色没实现

适合单列布局，不适合左右分栏，突出大图效果

HTML结构

css3倒影只支持webkit内核浏览器。火狐不支持

CSS3实现预览图的倒影

DATA数据分析

VIEW页面结构分析