超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

關(guān)于圖片列表的寬度自適應(yīng)解決辦法

2012-9-19    藍(lán)藍(lán)設(shè)計(jì)的小編

 

 轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(  m.miumiuwan.com  )是一家專注而深入的設(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)容,每天自動(dòng)發(fā)到您的郵箱中,          請點(diǎn)這里

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

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

關(guān)于圖片列表的寬度自適應(yīng)解決辦法

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

關(guān)于圖片列表的寬度自適應(yīng)解決辦法

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

關(guān)于圖片列表的寬度自適應(yīng)解決辦法

經(jīng)過分析我們可以把需求分解為:欄目的寬度自適應(yīng)、圖片列表的自適應(yīng)顯示、列表的左右滾動(dòng)。欄目的寬度自適應(yīng),可以直接用樣式來解決,寬度的獲取也簡單,不再多說。圖片的滾動(dòng)也還好說,無非就是通過樣式改變列表的左右位置來實(shí)現(xiàn)。難點(diǎn)在于,在一個(gè)寬度會(huì)各種變化的區(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:

關(guān)于圖片列表的寬度自適應(yīng)解決辦法

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

關(guān)于圖片列表的寬度自適應(yīng)解決辦法

那么我們可以得出: 
可視區(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)); 

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

4、需要注意的情況

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

關(guān)于圖片列表的寬度自適應(yīng)解決辦法

像基友一樣合在一起顯然不好看~ – 此時(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:

關(guān)于圖片列表的寬度自適應(yīng)解決辦法

當(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();//隱藏向右滾動(dòng)箭頭(初始化時(shí)可默認(rèn)左箭頭隱藏,右箭頭顯示)
};

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

5、列表滾動(dòng)

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

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

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

關(guān)于圖片列表的寬度自適應(yīng)解決辦法

代碼:

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

以上是向右滾的情況,向左滾時(shí)就簡單了。當(dāng)已滾動(dòng)寬度為0時(shí),即是向左滾動(dòng)到頭了。

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

6、綁定方法

圖片列表滾動(dòng)講完了,接下來就是執(zhí)行這些方法了。為了自適應(yīng)用戶適時(shí)改變窗口大小的情況,需要將自適應(yīng)函數(shù)綁定到resize方法中執(zhí)行,代碼:

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

啰嗦這么多,其實(shí)主要圍繞兩個(gè)問題:

a. 通過計(jì)算圖片間距控制列表的顯示

b. 通過寬度計(jì)算解決滾動(dòng)至最末

OK~點(diǎn)擊這里是DEMO …(用瀏覽器打開之后,通過改變窗口大小,體驗(yàn)圖片列表自適應(yīng)效果。)

小思考 (沒看DEMO的同學(xué)可以不用思考哦~):將DEMO用瀏覽器打開后,拖動(dòng)窗口至最小寬度,即當(dāng)前欄目寬度小于圖片寬度時(shí)(小不動(dòng)?用Chrome試試),列表中看不到圖了,為什么?如何解決呢?

整個(gè)過程其實(shí)還是挺簡單的,不知道我有沒說清楚,大家有沒聽明白?如果沒說清楚的地方正好你又感興趣,可以留言哦~親。不過,如果您是個(gè)修為高深的化神期強(qiáng)者,也希望多多指出不當(dāng)之處啊,感謝感謝~~小可尚徘徊于筑基期~露怯…..學(xué)好JS說了好多年,想想那些年……所以,朋友,如果你也是個(gè)網(wǎng)頁重構(gòu),別光寫DIV了,有空多學(xué)學(xué)寫寫JS吧,挺有意思的呢~

話說,互聯(lián)網(wǎng)發(fā)展日新月異,各種新技術(shù)層不出窮,需要學(xué)習(xí)的東西還真多呢。。。加油~

各種學(xué)壓力大呀~ 要不,放松一下先擼一把?好吧… 小明、小純 艾歐尼亞,搞起~~~

(轉(zhuǎn)載請注明出處GDC)

分享本文至:

日歷

鏈接

個(gè)人資料

存檔