從事網頁重構好幾年了，Javascript能力一直比較菜，主要還是做得太少。為了提高這方面的能力，這段時間主動承擔了一些這方面的工作，真心感到學習和積累的不易，不過時常伴隨著一些解決問題之后的小小成就感又讓人樂此不疲。
在近期一個項目中，遇到一個圖片列表自適應寬度顯示的問題，需求本身并不難，借此且算是梳理和總結一下當時的解決思路吧，也期望能給有需要做這類需求而又知如何下手的同學帶來一點小啟發。實現的方法應該很多，如果你有更好的，要分享哦~~
需求是這樣的，在一個自適應寬度的欄目里（如圖1）：
1、 欄目的寬度可以因用戶的操作發生改變，如拖拽改變窗口大小等；
2、 當寬度改變之后，需要圖片列表總是能在欄目中完好地顯示：圖片之間有一定的間距，并且不會出現半張圖。
3、 若當前寬度不能完全顯示所有圖片時，可以通過點擊左右兩邊的箭頭進行滾動顯示。
如圖2：
經過分析我們可以把需求分解為：欄目的寬度自適應、圖片列表的自適應顯示、列表的左右滾動。欄目的寬度自適應，可以直接用樣式來解決，寬度的獲取也簡單，不再多說。圖片的滾動也還好說，無非就是通過樣式改變列表的左右位置來實現。難點在于，在一個寬度會各種變化的區域中，怎么讓圖片列表自適應顯示呢？
對比圖1、圖2，我們發現前后的變化有：欄目寬度、圖片顯示個數、圖片之間的間距。寬度自適應好辦，那圖片個數和間距呢？嗯哪，這就是我們需要解決的核心問題。
1、關于可視區域
再看圖2，欄目中只有3個圖片，我們知道是因為其它部分被樣式隱藏了，而整個圖片列表其實是一直存在的一個整體。就像Flash里的遮罩一樣，我們要做的其實是按照用戶的意愿控制圖片列表的某一部分顯示給用戶看到。為便于后面好講，我們把用戶可以看到的這部分列表區域稱為列表的可視區域。它的特點是隨著當前欄目的寬度變化而變化，
如圖3：
圖片列表是死的，欄目寬度是變化的，如何讓圖片列表適應欄目寬度的變化完好顯示在可視區域里呢？好吧，你已經想到了…答案就是通過改變圖片之間的間距來實現。
如圖4：
那么我們可以得出：
可視區域的寬度 = 可視區域內可顯示的圖片寬度總和（下文稱可視圖片數） + 圖片間距總和