轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(  www.li-bodun.cn  )是一家專注而深入的設(shè)計(jì)機(jī)構(gòu) ，為期望卓越的國內(nèi)外企業(yè)提供有效的   BS界面設(shè)計(jì) 、  cs界面設(shè)計(jì) 、  ipad界面設(shè)計(jì)  、  包裝設(shè)計(jì) 、  圖標(biāo)定制 、  用戶體驗(yàn) 、交互設(shè)計(jì)、  網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

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

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

從事網(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）：

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

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

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

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

這樣我們就可以計(jì)算圖片間距了：

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

代碼：

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

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

4、需要注意的情況

當(dāng)上面計(jì)算出來的間距總和很小，或者干脆為0了… 如圖5：

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

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

還有一種情況，如圖6：

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

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

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

5、列表滾動

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

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

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

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

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

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