從事網(wǎng)頁重構(gòu)好幾年了，Javascript能力一直比較菜，主要還是做得太少。為了提高這方面的能力，這段時(shí)間主動承擔(dān)了一些這方面的工作，真心感到學(xué)習(xí)和積累的不易，不過時(shí)常伴隨著一些解決問題之后的小小成就感又讓人樂此不疲。

在近期一個(gè)項(xiàng)目中，遇到一個(gè)圖片列表自適應(yīng)寬度顯示的問題，需求本身并不難，借此且算是梳理和總結(jié)一下當(dāng)時(shí)的解決思路吧，也期望能給有需要做這類需求而又知如何下手的同學(xué)帶來一點(diǎn)小啟發(fā)。實(shí)現(xiàn)的方法應(yīng)該很多，如果你有更好的，要分享哦~~

需求是這樣的，在一個(gè)自適應(yīng)寬度的欄目里（如圖1）：

1、 欄目的寬度可以因用戶的操作發(fā)生改變，如拖拽改變窗口大小等；

2、 當(dāng)寬度改變之后，需要圖片列表總是能在欄目中完好地顯示：圖片之間有一定的間距，并且不會出現(xiàn)半張圖。

3、 若當(dāng)前寬度不能完全顯示所有圖片時(shí)，可以通過點(diǎn)擊左右兩邊的箭頭進(jìn)行滾動顯示。

如圖2：

經(jīng)過分析我們可以把需求分解為：欄目的寬度自適應(yīng)、圖片列表的自適應(yīng)顯示、列表的左右滾動。欄目的寬度自適應(yīng)，可以直接用樣式來解決，寬度的獲取也簡單，不再多說。圖片的滾動也還好說，無非就是通過樣式改變列表的左右位置來實(shí)現(xiàn)。難點(diǎn)在于，在一個(gè)寬度會各種變化的區(qū)域中，怎么讓圖片列表自適應(yīng)顯示呢？

對比圖1、圖2，我們發(fā)現(xiàn)前后的變化有：欄目寬度、圖片顯示個(gè)數(shù)、圖片之間的間距。寬度自適應(yīng)好辦，那圖片個(gè)數(shù)和間距呢？嗯哪，這就是我們需要解決的核心問題。

1、關(guān)于可視區(qū)域

再看圖2，欄目中只有3個(gè)圖片，我們知道是因?yàn)槠渌�部分被樣式隱藏了，而整個(gè)圖片列表其實(shí)是一直存在的一個(gè)整體。就像Flash里的遮罩一樣，我們要做的其實(shí)是按照用戶的意愿控制圖片列表的某一部分顯示給用戶看到。為便于后面好講，我們把用戶可以看到的這部分列表區(qū)域稱為列表的可視區(qū)域。它的特點(diǎn)是隨著當(dāng)前欄目的寬度變化而變化，

如圖3：

圖片列表是死的，欄目寬度是變化的，如何讓圖片列表適應(yīng)欄目寬度的變化完好顯示在可視區(qū)域里呢？好吧，你已經(jīng)想到了…答案就是通過改變圖片之間的間距來實(shí)現(xiàn)。

如圖4：

那么我們可以得出：
可視區(qū)域的寬度 = 可視區(qū)域內(nèi)可顯示的圖片寬度總和（下文稱可視圖片數(shù)） + 圖片間距總和

2、計(jì)算可視圖片數(shù)

事情的關(guān)鍵是顯示圖片，我們就從計(jì)算可視圖片數(shù)開始�？梢晠^(qū)域的寬度我們可以輕易獲取，所有圖片的寬度也是統(tǒng)一的尺寸（什么？不統(tǒng)一？還好還好，我們這的產(chǎn)品經(jīng)理倒是還沒有BT到這個(gè)地步呢^^~ 這里還是先講固定的情況吧，不固定的情況下回再探討）。先忽略一下圖片間距，那么問題可以簡化為：

可視圖片數(shù) = 可視區(qū)域?qū)挾?/ 單位圖片寬度

代碼（代碼中涉及到的html代碼請查看下文Demo）：

1. //獲取當(dāng)前可視區(qū)域的寬度   
2.  var pLstWrpWth = $('.jQ_ptLst').width();               
3.  //獲取單位圖片寬度（圖片可能包括邊框樣式等，取列表元素Li的寬度參與計(jì)算以避免誤差）   
4.  var valLstLiWth = $('.jQ_ptLst li').width();               
5.  //計(jì)算當(dāng)前可視圖片數(shù)（可視區(qū)域?qū)挾?nbsp;/ 單位圖片寬度 再取整）   
6. valImgLth = Math.floor(pLstWrpWth / valLstLiWth);  

3、計(jì)算圖片間距

那間距怎么計(jì)算呢？從圖4我們可以看出，除去所有可視圖片的寬度剩下的就是間距的總和。于是：
間距總和 = 可視區(qū)域?qū)挾?– 單位圖片寬度 * 可視圖片數(shù)

這樣我們就可以計(jì)算圖片間距了：
圖片間距 = 間距總和（除去可視圖片寬度的可視區(qū)域?qū)挾龋?/ 間距個(gè)數(shù)（即可視圖片數(shù)+1，為何+1？看圖4）
代碼：

1. //向上取整可避免小數(shù)帶來的誤差）   
2. valpLstMg = Math.ceil((pLstWrpWth - valImgLth * valLstLiWth) / (valImgLth + 1));  

到這里，你會發(fā)現(xiàn)，其實(shí)最終需要解決的問題就是計(jì)算圖片間距。有了間距，我們就已經(jīng)能做到根據(jù)欄目寬度，完好顯示可視區(qū)域的圖片了。至于能顯示多少圖，此時(shí)我們已經(jīng)不關(guān)心了。

標(biāo)簽： 圖片列表自適應(yīng) 磯

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。