從事網頁重構好幾年了，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吧，挺有意思的呢~
話說，互聯網發展日新月異，各種新技術層不出窮，需要學習的東西還真多呢。。。加油~
各種學壓力大呀~ 要不，放松一下先撸一把？好吧…