成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

wangdai / 671人閱讀

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

前言

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

瀑布流 
瀑布流，又稱瀑布流式布局。是比較流行的一種網(wǎng)站頁面布局，視覺表現(xiàn)為參差不齊的多欄布局，隨著頁面滾動(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è)盒子為什么沒有‘跳到’第9個(gè)盒子下面的原因)，碰到第8個(gè)盒子后又被擋住了。

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

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

獲取頁面的寬度

獲取圖片盒子的寬度

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

column = pageWidth / itemWidth

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

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

column = pageWidth / (itemWidth + gap);

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

下面還有很多圖片盒子，我們先要排列第1行，所以在for循環(huán)里就要判斷一下，當(dāng)i(所有圖片盒子的索引) < column(顯示列數(shù))的時(shí)候，說明在第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行圖片盒子的高度來設(shè)置；

獲取圖片高度的時(shí)候要注意，程序必須寫在入口函數(shù)onload里面，因?yàn)閳D片的加載特性是：等頁面都加載完之后才去請求加載，所以不寫在入口函數(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í)的最小列高度沒有改變，應(yīng)該加上下面圖片的高度，得出一個(gè)新高度。

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

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

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

8、觸發(fā)resize事件

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

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

9、懶加載效果

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

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

完整代碼：







    

                                .
                                .
                                .

效果圖：

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/90485.html

相關(guān)文章

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

    摘要：使用實(shí)現(xiàn)瀑布流并不實(shí)用，因?yàn)閷?shí)現(xiàn)的瀑布流都是以列來排列的，這里記錄下用實(shí)現(xiàn)瀑布流，以及微信小程序中使用左右兩列來實(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)的瀑布流都是以列來排列的，這里記錄下用js實(shí)現(xiàn)瀑布流，以及微信小程序中使用左右兩列來實(shí)現(xiàn)瀑布流 1.效果圖...

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

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

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

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

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

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

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

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

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

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

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

0條評(píng)論

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