用CSS和第三方库来提高图片浏览体验

你是否关注过浏览、点击图片这个微妙的过程，不一样的图片展示、交互方式各带来什么样的观感？本文聚焦于图片浏览这个过程以及如何使用CSS3和第三方库来提高体验。

 

先看下Pinterest、Flickr等时下热门图片分享类网站。

Pinterest

1	采用瀑布流式，设计者本意大概是用户对于图片这类非文本信息自己就是非线性浏览的，交错排列的图片集合使焦点最大化分散在页面各个部分。

用户实施了pin这一动做后，图片信息以board形式集合，每一个board里的图片呈现规矩的网格布局，这种布局适合于有限集合的排列。

让咱们停下想一想，为了“分散”的注意力而采用了瀑布流式，那么究竟每张图片用多大尺寸合适，可以下降用户面对满屏图片时的不适感？不一样尺寸图片如何排放？在移动端又须要采用什么布局？怎么解决多张图片加载的性能问题？这些问题留待思考。

Pinterest每张图的宽度是固定的，高度也可获取，这样在渲染页面的时候就能够先肯定位置而不是等加载到图片资源。

 

 

 

Flickr

我的感受体验有差距。页面采用网格布局，评论等文字都采起隐藏措施，页面总体整洁大方。可是，单张图片浏览的体验彻底不在这个水平上。点击图片后页面跳转到对应图片的页面（此处设置浮层进行显示不是更优？），页面放置了左右导航来浏览相片集里先后的图，导航没有集合更多的效果例如预览，最让我感受不适的是返回相册的入口较为隐蔽，找不到这个入口的状况下只能一步步点击浏览器的返回键，若是打开了一个相片集的多张图片，回到相册的步骤相应增长到两步以上。

Facebook

Facebook用时间轴来组织信息，相比Pinterest、Flickr这些内容型网站，fb更具sns属性。双栏加瀑布流布局，采用瀑布流能够避免双栏布局下不一样高度内容单元带来的空白区域。

我的相册用网格布局紧凑整洁清晰，点击图片后浮层展现大图和赞、评论、圈图等功能，点击浮层关闭按钮返回相册，感受布局略显小但也符合“够用就好”主义。

 

 

 

css3极大丰富了用户体验，本文下半篇聚焦于使用css3及部分优秀的第三方库来帮助提高图片浏览的体验，让图片浏览这个过程更美一点~

1、图片展现

一、层叠

经过设置transform ：translate3d 样式可实现层叠的立体效果

function setTransformStyle( el, tval ) {   el.style.WebkitTransform = tval;   el.style.msTransform = tval;   el.style.transform = tval;   }

以下图：分别设transform 样式的值为translate3d(0，0，0)，translate3d(0，0，-60px)，translate3d(0，0，-120px)

在点击单张图片改变三个向量的值来调整当前显示在最前端的图片

二、铺放

铺放能够经过transform: rotate实现，同时加上transition样式加强动画效果。

展开：

为不一样图片设相应z-index、ransform: rotate

{   z-index: 10;   -webkit-transform-origin: 25% 100%;   -webkit-transform: translate(0px) rotate(30deg);   -webkit-transition: -webkit-transform 500ms ease-out 0ms;   transition: -webkit-transform 500ms ease-out 0ms;   }

Transition的几个值分别对应：属性改变时执行的效果；动画的持续时间；动画类型；延迟动画的时间。

合并：

{   '-webkit-transition' : 'none',   '-moz-transition' : 'none',   '-ms-transition' : 'none',   '-o-transition' : 'none',   'transition' : 'none'   }

借助一些优秀的插件可以帮助咱们更快的实现效果，例如baraja(http://tympanus.net/Development/Baraja/js/jquery.baraja.js)

$( '#baraja-el' ).baraja();   $( '#some-button' ).on( 'click', function( event ) { baraja.fan( { speed : 500, easing : 'ease-out', range : 90, direction : 'right', origin : { x : 25, y : 100 }, center : true, translation : 0 } );   } );

2、图片交互

一、翻页

BookBlock这个库能够参考

二、折叠

OriDomi（http://oridomi.com/）实现了各类折叠的效果，你的图片操做起来就像张纸，让用户从潜意识出发来行为，将现实生活的习惯无缝延伸到web中的作法值得推崇。

具体来看看OriDomi如何使用，有哪些效果。我用了一张svg格式地图来做为操做对象，基于svg自己的可操做性后续能够加入更多的点期待下~

初始化一个OriDomi对象（参数可选可配置）：

添加动画效果：

curl() //卷曲:正数向偏离银幕方向卷曲，值越大弯曲度越大，负数反之

accordion() //相似手风琴展开的效果

stairs() //层叠效果

foldUp() //收起

更多的效果能够参见OriDomi官网

三、拖拽

拖拽行为可经过监听dragStart,dragMove,dragEnd事件，并把position等参数传给处理事件的函数完成。

在此介绍Draggabilly这个库，实现的图片拖动效果很是顺畅。

Draggabilly初始化：

//elem : 控制的元素 var draggie = new Draggabilly( elem, { // options... });

事件：dragStart、dragMove、dragEnd

使用：

draggie.on( 'dragMove', function(){ //处理的函数 } );