從事網(wǎng)頁重構(gòu)好幾年了，Javascript能力一直比較菜，主要還是做得太少。為了提高這方面的能力，這段時間主動承擔(dān)了一些這方面的工作，真心感到學(xué)習(xí)和積累的不易，不過時常伴隨著一些解決問題之后的小小成就感又讓人樂此不疲。
在近期一個項目中，遇到一個圖片列表自適應(yīng)寬度顯示的問題，需求本身并不難，借此且算是梳理和總結(jié)一下當(dāng)時的解決思路吧，也期望能給有需要做這類需求而又知如何下手的同學(xué)帶來一點小啟發(fā)。實現(xiàn)的方法應(yīng)該很多，如果你有更好的，要分享哦~~
需求是這樣的，在一個自適應(yīng)寬度的欄目里（如圖1）：
1、 欄目的寬度可以因用戶的操作發(fā)生改變，如拖拽改變窗口大小等；
2、 當(dāng)寬度改變之后，需要圖片列表總是能在欄目中完好地顯示：圖片之間有一定的間距，并且不會出現(xiàn)半張圖。
3、 若當(dāng)前寬度不能完全顯示所有圖片時，可以通過點擊左右兩邊的箭頭進行滾動顯示。
如圖2：
經(jīng)過分析我們可以把需求分解為：欄目的寬度自適應(yīng)、圖片列表的自適應(yīng)顯示、列表的左右滾動。欄目的寬度自適應(yīng)，可以直接用樣式來解決，寬度的獲取也簡單，不再多說。圖片的滾動也還好說，無非就是通過樣式改變列表的左右位置來實現(xiàn)。難點在于，在一個寬度會各種變化的區(qū)域中，怎么讓圖片列表自適應(yīng)顯示呢？
對比圖1、圖2，我們發(fā)現(xiàn)前后的變化有：欄目寬度、圖片顯示個數(shù)、圖片之間的間距。寬度自適應(yīng)好辦，那圖片個數(shù)和間距呢？嗯哪，這就是我們需要解決的核心問題。
1、關(guān)于可視區(qū)域
再看圖2，欄目中只有3個圖片，我們知道是因為其它部分被樣式隱藏了，而整個圖片列表其實是一直存在的一個整體。就像Flash里的遮罩一樣，我們要做的其實是按照用戶的意愿控制圖片列表的某一部分顯示給用戶看到。為便于后面好講，我們把用戶可以看到的這部分列表區(qū)域稱為列表的可視區(qū)域。它的特點是隨著當(dāng)前欄目的寬度變化而變化，
如圖3：
圖片列表是死的，欄目寬度是變化的，如何讓圖片列表適應(yīng)欄目寬度的變化完好顯示在可視區(qū)域里呢？好吧，你已經(jīng)想到了…答案就是通過改變圖片之間的間距來實現(xiàn)。
如圖4：
那么我們可以得出：
可視區(qū)域的寬度= 可視區(qū)域內(nèi)可顯示的圖片寬度總和（下文稱可視圖片數(shù)） +圖片間距總和
2、計算可視圖片數(shù)
事情的關(guān)鍵是顯示圖片，我們就從計算可視圖片數(shù)開始?？梢晠^(qū)域的寬度我們可以輕易獲取，所有圖片的寬度也是統(tǒng)一的尺寸（什么？不統(tǒng)一？還好還好，我們這的產(chǎn)品經(jīng)理倒是還沒有BT到這個地步呢^^~ 這里還是先講固定的情況吧，不固定的情況下回再探討）。先忽略一下圖片間距，那么問題可以簡化為：
可視圖片數(shù)= 可視區(qū)域?qū)挾?/ 單位圖片寬度
代碼（代碼中涉及到的html代碼請查看下文Demo）：
3、計算圖片間距
那間距怎么計算呢？從圖4我們可以看出，除去所有可視圖片的寬度剩下的就是間距的總和。于是：
間距總和 = 可視區(qū)域?qū)挾?– 單位圖片寬度 * 可視圖片數(shù)
這樣我們就可以計算圖片間距了：
圖片間距 = 間距總和（除去可視圖片寬度的可視區(qū)域?qū)挾龋?/ 間距個數(shù)（即可視圖片數(shù)+1，為何+1？看圖4）
代碼：
到這里，你會發(fā)現(xiàn)，其實最終需要解決的問題就是計算圖片間距。有了間距，我們就已經(jīng)能做到根據(jù)欄目寬度，完好顯示可視區(qū)域的圖片了。至于能顯示多少圖，此時我們已經(jīng)不關(guān)心了。
重慶分公司
重慶分公司
