国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

原生js實(shí)現(xiàn)瀑布流效果

wangdai / 652人閱讀

摘要：前言最近在整理基礎(chǔ)知識(shí)，接觸到了幾個(gè)常用的頁(yè)面特效，其中覺(jué)得用原生實(shí)現(xiàn)瀑布流的案例十分有趣，于是與大家分享一下。瀑布流瀑布流，又稱(chēng)瀑布流式布局。通過(guò)定位的方式是我們實(shí)現(xiàn)瀑布流的最基本的原理，只要我們動(dòng)態(tài)的設(shè)置它的值值，就能讓它排列。

前言

最近在整理js基礎(chǔ)知識(shí)，接觸到了幾個(gè)常用的頁(yè)面特效，其中覺(jué)得用原生js實(shí)現(xiàn)瀑布流的案例十分有趣，于是與大家分享一下。

瀑布流 
瀑布流，又稱(chēng)瀑布流式布局。是比較流行的一種網(wǎng)站頁(yè)面布局，視覺(jué)表現(xiàn)為參差不齊的多欄布局，隨著頁(yè)面滾動(dòng)條向下滾動(dòng)，這種布局還會(huì)不斷加載數(shù)據(jù)塊并附加至當(dāng)前尾部。

1、首先瀑布流所有的圖片應(yīng)該保持寬度一致，高度是由內(nèi)容決定。

左浮動(dòng)的話，我們可以看到第6個(gè)盒子直接就在第4個(gè)盒子旁邊停下了，因?yàn)榈?b>4個(gè)高度最高，擋住了它左浮動(dòng)的去路。第6個(gè)盒子是第2行的最后一個(gè)，所以第7個(gè)盒子只能在第3行排列了。當(dāng)排到第12個(gè)盒子的時(shí)候，盒子會(huì)以第11個(gè)盒子的位置為基礎(chǔ)左浮動(dòng)(這就是第12個(gè)盒子為什么沒(méi)有‘跳到’第9個(gè)盒子下面的原因)，碰到第8個(gè)盒子后又被擋住了。

通過(guò)定位的方式是我們實(shí)現(xiàn)瀑布流的最基本的原理，只要我們動(dòng)態(tài)的設(shè)置它的top值、left值，就能讓它排列。

2、定位后確定瀏覽器顯示區(qū)域內(nèi)，一行能放多少列圖片盒子。

獲取頁(yè)面的寬度

獲取圖片盒子的寬度

顯示的列數(shù) = 頁(yè)面寬度/圖片盒子寬度

column = pageWidth / itemWidth

3、為了美觀我們可以加上一個(gè)空隙

顯示的列數(shù) = 頁(yè)面寬度/(圖片盒子寬度+間隙);

column = pageWidth / (itemWidth + gap);

4、 確定列數(shù)之后，排列第一行

下面還有很多圖片盒子，我們先要排列第1行，所以在for循環(huán)里就要判斷一下，當(dāng)i(所有圖片盒子的索引) < column(顯示列數(shù))的時(shí)候，說(shuō)明在第1行；

知道在第1行之后，動(dòng)態(tài)設(shè)置每個(gè)圖片盒子的left值就能排好第1行。

left = i * ( itemWidth + gap );

5、第1行排列好之后，獲取第1行所有圖片盒子的高度

需要定義一個(gè)數(shù)組arr，將獲取到的高度存在數(shù)組中，因?yàn)榈?b>2行排列的時(shí)候需要考慮top值，此時(shí)只能根據(jù)第1行圖片盒子的高度來(lái)設(shè)置；

獲取圖片高度的時(shí)候要注意，程序必須寫(xiě)在入口函數(shù)onload里面，因?yàn)閳D片的加載特性是：等頁(yè)面都加載完之后才去請(qǐng)求加載，所以不寫(xiě)在入口函數(shù)里可能會(huì)出現(xiàn)高度獲取不到的情況。

6、排列第2行

獲取到剛剛數(shù)組中，高度最小的那一列，將第2行的第1個(gè)圖片盒子放置在它的下方；

此時(shí)的left值就是高度最小列的offsetLeft；top值就是：第1行高度最小列的高度(為了布局美觀可以加上上下間隙gap)。

記錄下高度最小列的索引index，后面計(jì)算會(huì)用到；

設(shè)置完成之后，會(huì)發(fā)現(xiàn)后面所有的圖片都疊在這個(gè)高度最小列的下面，原因就是此時(shí)的最小列高度沒(méi)有改變，應(yīng)該加上下面圖片的高度，得出一個(gè)新高度。

7、改變最小列當(dāng)前高度

此時(shí)的這一列高度其實(shí)已經(jīng)發(fā)生改變了，所以需要將新高度賦值給數(shù)組

當(dāng)前高度最小列的高度 = 當(dāng)前高度最小列的高度 + 間隙 + 下面圖片盒子的高度

8、觸發(fā)resize事件

將整個(gè)設(shè)置樣式的部分封裝成一個(gè)函數(shù)，在onload里面注冊(cè)一個(gè)resize事件，只要頁(yè)面一發(fā)生改變，就觸發(fā)樣式部分的代碼。

實(shí)時(shí)改變pageWidth的寬度，這樣瀑布流就會(huì)是一個(gè)響應(yīng)式的效果了

9、懶加載效果

目前我們用的是30張圖片，假如一個(gè)頁(yè)面中有幾百?gòu)垐D片的時(shí)候，我們不可能等到它都加載完再顯示，所有這里引入一個(gè)懶加載的概念，我們規(guī)定第30張為顯示的最后一張圖片，當(dāng)滾動(dòng)條滾動(dòng)到30張的時(shí)候，應(yīng)該加載下一批圖片。

即頁(yè)面可視區(qū)高度+滾動(dòng)條卷去的高度 = 第30圖片的offsetTop；的時(shí)候加載下面的圖片。

完整代碼：







    

                                .
                                .
                                .

效果圖：

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/90485.html

相關(guān)文章

  • 原生js實(shí)現(xiàn)瀑布流及微信小程序中使用左右兩列實(shí)現(xiàn)瀑布流

    摘要：使用實(shí)現(xiàn)瀑布流并不實(shí)用，因?yàn)閷?shí)現(xiàn)的瀑布流都是以列來(lái)排列的，這里記錄下用實(shí)現(xiàn)瀑布流，以及微信小程序中使用左右兩列來(lái)實(shí)現(xiàn)瀑布流效果圖原生實(shí)現(xiàn)瀑布流文件圖片可以自己找點(diǎn)替換下就可以了文件添加陰影的時(shí)候，加上會(huì)顯得更加有點(diǎn)懸浮感文件計(jì)算圖片列數(shù) 使用css實(shí)現(xiàn)瀑布流并不實(shí)用，因?yàn)閏ss實(shí)現(xiàn)的瀑布流都是以列來(lái)排列的，這里記錄下用js實(shí)現(xiàn)瀑布流，以及微信小程序中使用左右兩列來(lái)實(shí)現(xiàn)瀑布流 1.效果圖...

    imingyu 評(píng)論0 收藏0

  • 原生 JS 實(shí)現(xiàn)一個(gè)瀑布流插件

    摘要：瀑布流布局中的圖片有一個(gè)核心特點(diǎn)等寬不定等高，瀑布流布局在國(guó)內(nèi)網(wǎng)網(wǎng)站都有一定規(guī)模的使用，比如花瓣網(wǎng)等等。那么接下來(lái)就基于這個(gè)特點(diǎn)開(kāi)始瀑布流探索之旅。 showImg(https://segmentfault.com/img/remote/1460000013059759?w=640&h=280); 瀑布流布局中的圖片有一個(gè)核心特點(diǎn) —— 等寬不定等高，瀑布流布局在國(guó)內(nèi)網(wǎng)網(wǎng)站都有一定規(guī)模...

    Alfred 評(píng)論0 收藏0

  • 原生 JS 實(shí)現(xiàn)一個(gè)瀑布流插件

    摘要：瀑布流布局中的圖片有一個(gè)核心特點(diǎn)等寬不定等高，瀑布流布局在國(guó)內(nèi)網(wǎng)網(wǎng)站都有一定規(guī)模的使用，比如花瓣網(wǎng)等等。那么接下來(lái)就基于這個(gè)特點(diǎn)開(kāi)始瀑布流探索之旅。 showImg(https://segmentfault.com/img/remote/1460000013059759?w=640&h=280); 瀑布流布局中的圖片有一個(gè)核心特點(diǎn) —— 等寬不定等高，瀑布流布局在國(guó)內(nèi)網(wǎng)網(wǎng)站都有一定規(guī)模...

    lavnFan 評(píng)論0 收藏0

  • 原生 JS 實(shí)現(xiàn)一個(gè)瀑布流插件

    摘要：瀑布流布局中的圖片有一個(gè)核心特點(diǎn)等寬不定等高，瀑布流布局在國(guó)內(nèi)網(wǎng)網(wǎng)站都有一定規(guī)模的使用，比如花瓣網(wǎng)等等。那么接下來(lái)就基于這個(gè)特點(diǎn)開(kāi)始瀑布流探索之旅。 showImg(https://segmentfault.com/img/remote/1460000013059759?w=640&h=280); 瀑布流布局中的圖片有一個(gè)核心特點(diǎn) —— 等寬不定等高，瀑布流布局在國(guó)內(nèi)網(wǎng)網(wǎng)站都有一定規(guī)模...

    wenyiweb 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<