用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(){ //處理的函數 } );