轉載藍藍設計(  www.bouu.cn  )是一家專注而深入的設計機構 ，為期望卓越的國內(nèi)外企業(yè)提供有效的   BS界面設計 、  cs界面設計 、  ipad界面設計  、  包裝設計 、  圖標定制 、  用戶體驗 、交互設計、  網(wǎng)站建設 、平面設計服務

來源：http://www.uisheji.com/114057.html

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中，          請點這里

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

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

需求是這樣的，在一個自適應寬度的欄目里（如圖1）：

1、  欄目的寬度可以因用戶的操作發(fā)生改變，如拖拽改變窗口大小等； 
2、  當寬度改變之后，需要圖片列表總是能在欄目中完好地顯示：圖片之間有一定的間距，并且不會出現(xiàn)半張圖。 
3、  若當前寬度不能完全顯示所有圖片時，可以通過點擊左右兩邊的箭頭進行滾動顯示。如圖2：

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

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

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

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

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

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

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

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

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

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

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

3、計算圖片間距

那間距怎么計算呢？從圖4我們可以看出，除去所有可視圖片的寬度剩下的就是間距的總和。于是：

間距總和 = 可視區(qū)域?qū)挾?– 單位圖片寬度 * 可視圖片數(shù)

這樣我們就可以計算圖片間距了：

圖片間距 = 間距總和（除去可視圖片寬度的可視區(qū)域?qū)挾龋?/ 間距個數(shù)（即可視圖片數(shù)+1，為何+1？看圖4）

代碼：

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

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

4、需要注意的情況

當上面計算出來的間距總和很小，或者干脆為0了… 如圖5：

像基友一樣合在一起顯然不好看~ – 此時，我們可以設定一個最小間距來解決這個問題。當計算出的間距小于這個間距時，就減少1個可視圖片，把原本屬于這個圖片的寬度分配給其余的圖片作為間距。代碼：

var pLstLesMg = 5;         //設定最小間距，即臨界間距
if(valpLstMg < pLstLesMg){
    valImgLth = valImgLth - 1;  //當間距小于臨界間距時，可視圖片數(shù)-1
    fnpLstMg();         //重新計算可視圖片數(shù)-1之后的間距
};

還有一種情況，如圖6：

當可視圖片數(shù) 大于列表總圖片數(shù) 時（還有等于的情況哦），圖片總數(shù)即為可視圖片數(shù)。代碼：

var pLstImgLth = $('.jQ_ptLst').find('img').length;    //獲取圖片總數(shù)
if(valImgLth >= pLstImgLth){
    valImgLth = pLstImgLth;  //圖片總數(shù)即為可視圖片數(shù)
    fnpLstMg();      //用新可視圖片數(shù)重新計算間距
    $('.jQ_plstRoRt').hide();//隱藏向右滾動箭頭（初始化時可默認左箭頭隱藏，右箭頭顯示）
};

到這里，基本上圖片列表自適應寬度顯示就解決了，接下來就是圖片列表的滾動問題。

5、列表滾動

有經(jīng)驗的同學可能一下就想到了，問題的關鍵是要怎么判斷當前滾動的是否為最后一張圖片（?。磕闶钦f做循環(huán)滾動？滾到最后一張無縫拼接第一張圖，如此永遠滾下去？其實，我只是想說，你們的產(chǎn)品經(jīng)理心眼真好~ 嗯好吧，看在大家都不容易的份上，我們姑且還是探討一下這種情況吧）。

那么如何知道滾到最后一張圖片了呢？我想的辦法是通過寬度計算，即：

當已滾動總寬度 等于非可視區(qū)域?qū)挾?/strong> （即可視區(qū)域兩側的寬度之和）時，即不能再向右滾動了。如圖7：

var ptLstCurMg = parseInt(pLstRoWrp.css('margin-left')); //獲取當前已滾動寬度
//當已滾動寬度 = 非可視區(qū)寬度，即已滾動至最后一圖
var ptLstRoWth = (pLstImgLth - valImgLth) * (ptLstImgMg + valLstLiWth);
if(ptLstCurMg + ptLstRoWth == 0){
    $this.hide();   //隱藏右箭頭
};

//當已滾動寬度 = 0，即已滾動至最前一圖
if(ptLstCurMg == 0){
    $this.hide();   //隱藏左箭頭
};

//一旦窗口大小發(fā)生變化即會執(zhí)行
$(window).resize(function(){
    fnAutoWth();    //自適應方法
});