首先，當我知道我得到一個任務需要寫一個在手機上能瀏覽圖片的插件時，我第一想到了iScroll。它的左右滑動，上下滑動的效果在安卓手機上也能讓用戶有良好的體驗，自己寫也能方便控制。
我的需求是，插件要能左右滑動圖片，當圖片很長的時候要能上下滑動瀏覽全部圖片，還要支持手勢縮放，特別是較長或者較寬的圖片。
1.
當最開始的時候，我做了一個本地緩存，把圖片保存起來，為了加載滑動圖片能更加流暢。
js代碼：var json=new Array(); for(var i=0;i<4;i++){//4張圖 json.push({id:i,url:"images/"+i+".jpg"}); } localStorage.setItem("imgList",JSON.stringify(json));
使用iScroll的結構是這樣的：
<div id="wrapper1"> <div id="scroller1"> <ul id="thelist"> </ul> </div> </div> <!-- Mask layer -->
其中的li為動態加載生成，然后將li標簽設置屏幕寬度，讓li中的img標簽寬度為100%，這樣就可以全寬展示圖片，實現左右一滑一張圖。縮放的話，iScroll中有個屬性，zoom:true就行。
這樣一來，左右滑動、圖片手勢縮放沒問題，可是當有的圖片長度超過屏幕長度的時候，它就無法上下滑動顯示被遮罩的部分了。
我試圖對li用height:auto;也沒效果。
后來查閱資料才知道，是iScroll為了能有更好的滑動效果，在它左右滑動的時候，禁用了上下滑動。
比如說iScroll.js中的這句：onBeforeScrollStart: function (e) { e.preventDefault(); }。
我曾想過在每張圖片load之前判斷圖片的長度，如果圖片長度大於屏幕長度，則對它限制height為屏幕高，否則就限制width為屏幕寬。
但是如果圖片數量很大的話，這樣的代價顯然是不合理的。
再經過大量查找，我發現了這個：
http://oklai.name/
2013/03/%e8%a7%a3%e5%86%b3iscroll%e6%a8%aa%e5%90%91%e6%bb%9a%e5%8a%a8%e5%8c%ba%e5%9f%9f%e6%97%a0%e6%b3%95%
e6%8b%89%e5%8a%a8%e9%a1%b5%e9%9d%a2%e7%9a%84%e9%97%ae%e9%a2%98/
http://oklai.name/
2013/03/%e8%a7%a3%e5%86%b3iscroll%e6%a8%aa%e5%90%91%e6%bb%9a%e5%8a%a8%e5%8c%ba%e5%9f%9f%e6%97%a0%e6%b3%95%
e6%8b%89%e5%8a%a8%e9%a1%b5%e9%9d%a2%e7%9a%84%e9%97%ae%e9%a2%98/
經過修改，確實可以實現左右滑動圖片的同時，若圖片長度超出屏幕長度，則可以上下滑動瀏覽。但是用戶體驗十分不好，圖片變成了上下左右等8個方向都能滑動了。
於是我放棄了iScroll。（在這里求大神有更好的解決方法~）
總結為：iScroll在橫向滾動區域的上下滑動問題。
2.
然后，我開始使考慮用photoswipe插件。
代碼：
<div id="MainContent"> <ul id="Gallery" class="gallery" style="display:none"> </ul> </div>
使用photoswipe的過程很順利，它支持左右滑動，若是圖片是超長圖片的話也能將圖片高度縮至屏幕高度從而能看到整張圖。
但是，它僅支持iOS下的縮放功能（也是設置allowUserZoom:true），對於android操作系統，文檔給出的話是it is compatible with Android（它能兼容android），但是其實是在android下不支持縮放功能的。
我在github上找到了一位大神的解決方案。
給出截圖：
附上demo下載鏈接：https://github.com/agliottone/PhotoSwipe
總結為：photoswipe在安卓下的手勢縮放問題。
然后我的圖片插件問題得到圓滿解決。iOS上能輕松滑動縮放，android上也能滑動縮放。happy！
（以上android僅指4.0或以上版本）