2012-9-19 藍藍設計的小編
轉載藍藍設計( www.izc.net.cn )是一家專注而深入的設計機構 ，為期望卓越的國內外企業提供有效的 BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
來源：http://www.uisheji.com/114057.html
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
從事網頁重構好幾年了，Javascript能力一直比較菜，主要還是做得太少。為了提高這方面的能力，這段時間主動承擔了一些這方面的工作，真心感到學習和積累的不易，不過時常伴隨著一些解決問題之后的小小成就感又讓人樂此不疲。
在近期一個項目中，遇到一個圖片列表自適應寬度顯示的問題，需求本身并不難，借此且算是梳理和總結一下當時的解決思路吧，也期望能給有需要做這類需求而又知如何下手的同學帶來一點小啟發。實現的方法應該很多，如果你有更好的，要分享哦~~
需求是這樣的，在一個自適應寬度的欄目里（如圖1）：
1、 欄目的寬度可以因用戶的操作發生改變，如拖拽改變窗口大小等；
2、 當寬度改變之后，需要圖片列表總是能在欄目中完好地顯示：圖片之間有一定的間距，并且不會出現半張圖。
3、 若當前寬度不能完全顯示所有圖片時，可以通過點擊左右兩邊的箭頭進行滾動顯示。如圖2：
經過分析我們可以把需求分解為：欄目的寬度自適應、圖片列表的自適應顯示、列表的左右滾動。欄目的寬度自適應，可以直接用樣式來解決，寬度的獲取也簡單，不再多說。圖片的滾動也還好說，無非就是通過樣式改變列表的左右位置來實現。難點在于，在一個寬度會各種變化的區域中，怎么讓圖片列表自適應顯示呢？
對比圖1、圖2，我們發現前后的變化有：欄目寬度、圖片顯示個數、圖片之間的間距。寬度自適應好辦，那圖片個數和間距呢？嗯哪，這就是我們需要解決的核心問題。
1、關于可視區域
再看圖2，欄目中只有3個圖片，我們知道是因為其它部分被樣式隱藏了，而整個圖片列表其實是一直存在的一個整體。就像Flash里的遮罩一樣，我們要做的其實是按照用戶的意愿控制圖片列表的某一部分顯示給用戶看到。為便于后面好講，我們把用戶可以看到的這部分列表區域稱為列表的可視區域 。它的特點是隨著當前欄目的寬度變化而變化，如圖3：
圖片列表是死的，欄目寬度是變化的，如何讓圖片列表適應欄目寬度的變化完好顯示在可視區域里呢？好吧，你已經想到了…答案就是通過改變圖片之間的間距來實現。如圖4：
那么我們可以得出：
可視區域的寬度
= 可視區域內可顯示的圖片寬度總和（下文稱可視圖片數
） + 圖片間距
總和
2、計算可視圖片數
事情的關鍵是顯示圖片，我們就從計算可視圖片數開始。可視區域的寬度我們可以輕易獲取，所有圖片的寬度也是統一的尺寸（什么？不統一？還好還好，我們這的產品經理倒是還沒有BT到這個地步呢^^~ 這里還是先講固定的情況吧，不固定的情況下回再探討）。先忽略一下圖片間距，那么問題可以簡化為：
可視圖片數 = 可視區域寬度 / 單位圖片寬度
代碼（代碼中涉及到的html代碼請查看下文Demo）：
//獲取當前可視區域的寬度
var pLstWrpWth = $('.jQ_ptLst').width();
//獲取單位圖片寬度（圖片可能包括邊框樣式等，取列表元素Li的寬度參與計算以避免誤差）
var valLstLiWth = $('.jQ_ptLst li').width();
//計算當前可視圖片數（可視區域寬度 / 單位圖片寬度 再取整）
valImgLth = Math.floor(pLstWrpWth / valLstLiWth);
3、計算圖片間距
那間距怎么計算呢？從圖4我們可以看出，除去所有可視圖片的寬度剩下的就是間距的總和。于是：
間距總和 = 可視區域寬度 – 單位圖片寬度 * 可視圖片數
這樣我們就可以計算圖片間距了：
圖片間距 = 間距總和（除去可視圖片寬度的可視區域寬度） / 間距個數（即可視圖片數+1，為何+1？看圖4）
代碼：
//向上取整可避免小數帶來的誤差） valpLstMg = Math.ceil((pLstWrpWth - valImgLth * valLstLiWth) / (valImgLth + 1));
到這里，你會發現，其實最終需要解決的問題就是計算圖片間距。有了間距，我們就已經能做到根據欄目寬度，完好顯示可視區域的圖片了。至于能顯示多少圖，此時我們已經不關心了。
4、需要注意的情況
當上面計算出來的間距總和很小，或者干脆為0了… 如圖5：
像基友一樣合在一起顯然不好看~ – 此時，我們可以設定一個最小間距來解決這個問題。當計算出的間距小于這個間距時，就減少1個可視圖片，把原本屬于這個圖片的寬度分配給其余的圖片作為間距。代碼：
var pLstLesMg = 5; //設定最小間距，即臨界間距
if(valpLstMg < pLstLesMg){
valImgLth = valImgLth - 1; //當間距小于臨界間距時，可視圖片數-1
fnpLstMg(); //重新計算可視圖片數-1之后的間距
};
還有一種情況，如圖6：
當可視圖片數 大于列表總圖片數 時（還有等于的情況哦），圖片總數即為可視圖片數。代碼：
var pLstImgLth = $('.jQ_ptLst').find('img').length; //獲取圖片總數
if(valImgLth >= pLstImgLth){
valImgLth = pLstImgLth; //圖片總數即為可視圖片數
fnpLstMg(); //用新可視圖片數重新計算間距
$('.jQ_plstRoRt').hide();//隱藏向右滾動箭頭（初始化時可默認左箭頭隱藏，右箭頭顯示）
};
到這里，基本上圖片列表自適應寬度顯示就解決了，接下來就是圖片列表的滾動問題。
5、列表滾動
有經驗的同學可能一下就想到了，問題的關鍵是要怎么判斷當前滾動的是否為最后一張圖片（啊？你是說做循環滾動？滾到最后一張無縫拼接第一張圖，如此永遠滾下去？其實，我只是想說，你們的產品經理心眼真好~ 嗯好吧，看在大家都不容易的份上，我們姑且還是探討一下這種情況吧）。
那么如何知道滾到最后一張圖片了呢？我想的辦法是通過寬度計算，即：
當已滾動總寬度
等于非可視區域寬度
（即可視區域兩側的寬度之和）時，即不能再向右滾動了。如圖7：
代碼：
var ptLstCurMg = parseInt(pLstRoWrp.css('margin-left')); //獲取當前已滾動寬度
//當已滾動寬度 = 非可視區寬度，即已滾動至最后一圖
var ptLstRoWth = (pLstImgLth - valImgLth) * (ptLstImgMg + valLstLiWth);
if(ptLstCurMg + ptLstRoWth == 0){
$this.hide(); //隱藏右箭頭
};
以上是向右滾的情況，向左滾時就簡單了。當已滾動寬度為0時，即是向左滾動到頭了。
//當已滾動寬度 = 0，即已滾動至最前一圖
if(ptLstCurMg == 0){
$this.hide(); //隱藏左箭頭
};
6、綁定方法
圖片列表滾動講完了，接下來就是執行這些方法了。為了自適應用戶適時改變窗口大小的情況，需要將自適應函數綁定到resize方法中執行，代碼：
//一旦窗口大小發生變化即會執行
$(window).resize(function(){
fnAutoWth(); //自適應方法
});
啰嗦這么多，其實主要圍繞兩個問題：
a. 通過計算圖片間距控制列表的顯示
b. 通過寬度計算解決滾動至最末
OK~點擊這里是DEMO …（用瀏覽器打開之后，通過改變窗口大小，體驗圖片列表自適應效果。）
小思考 （沒看DEMO的同學可以不用思考哦~）：將DEMO用瀏覽器打開后，拖動窗口至最小寬度，即當前欄目寬度小于圖片寬度時（小不動？用Chrome試試），列表中看不到圖了，為什么？如何解決呢？
整個過程其實還是挺簡單的，不知道我有沒說清楚，大家有沒聽明白？如果沒說清楚的地方正好你又感興趣，可以留言哦~親。不過，如果您是個修為高深的化神期強者，也希望多多指出不當之處啊，感謝感謝~~小可尚徘徊于筑基期~露怯…..學好JS說了好多年，想想那些年……所以，朋友，如果你也是個網頁重構，別光寫DIV了，有空多學學寫寫JS吧，挺有意思的呢~
話說，互聯網發展日新月異，各種新技術層不出窮，需要學習的東西還真多呢。。。加油~
各種學壓力大呀~ 要不，放松一下先擼一把？好吧… 小明、小純 艾歐尼亞，搞起~~~
（轉載請注明出處GDC)