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

資訊專欄INFORMATION COLUMN

原生js實現瀑布流效果

wangdai / 664人閱讀

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

前言

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

瀑布流 
瀑布流，又稱瀑布流式布局。是比較流行的一種網站頁面布局，視覺表現為參差不齊的多欄布局，隨著頁面滾動條向下滾動，這種布局還會不斷加載數據塊并附加至當前尾部。

1、首先瀑布流所有的圖片應該保持寬度一致，高度是由內容決定。

左浮動的話，我們可以看到第6個盒子直接就在第4個盒子旁邊停下了，因為第4個高度最高，擋住了它左浮動的去路。第6個盒子是第2行的最后一個，所以第7個盒子只能在第3行排列了。當排到第12個盒子的時候，盒子會以第11個盒子的位置為基礎左浮動(這就是第12個盒子為什么沒有‘跳到’第9個盒子下面的原因)，碰到第8個盒子后又被擋住了。

通過定位的方式是我們實現瀑布流的最基本的原理，只要我們動態的設置它的top值、left值，就能讓它排列。

2、定位后確定瀏覽器顯示區域內，一行能放多少列圖片盒子。

獲取頁面的寬度

獲取圖片盒子的寬度

顯示的列數 = 頁面寬度/圖片盒子寬度

column = pageWidth / itemWidth

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

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

column = pageWidth / (itemWidth + gap);

4、 確定列數之后，排列第一行

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

知道在第1行之后，動態設置每個圖片盒子的left值就能排好第1行。

left = i * ( itemWidth + gap );

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

需要定義一個數組arr，將獲取到的高度存在數組中，因為第2行排列的時候需要考慮top值，此時只能根據第1行圖片盒子的高度來設置；

獲取圖片高度的時候要注意，程序必須寫在入口函數onload里面，因為圖片的加載特性是：等頁面都加載完之后才去請求加載，所以不寫在入口函數里可能會出現高度獲取不到的情況。

6、排列第2行

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

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

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

設置完成之后，會發現后面所有的圖片都疊在這個高度最小列的下面，原因就是此時的最小列高度沒有改變，應該加上下面圖片的高度，得出一個新高度。

7、改變最小列當前高度

此時的這一列高度其實已經發生改變了，所以需要將新高度賦值給數組

當前高度最小列的高度 = 當前高度最小列的高度 + 間隙 + 下面圖片盒子的高度

8、觸發resize事件

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

實時改變pageWidth的寬度，這樣瀑布流就會是一個響應式的效果了

9、懶加載效果

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

即頁面可視區高度+滾動條卷去的高度 = 第30圖片的offsetTop；的時候加載下面的圖片。

完整代碼：







    

                                .
                                .
                                .

效果圖：

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/90485.html

相關文章

  • 原生js實現瀑布流及微信小程序中使用左右兩列實現瀑布流

    摘要：使用實現瀑布流并不實用，因為實現的瀑布流都是以列來排列的，這里記錄下用實現瀑布流，以及微信小程序中使用左右兩列來實現瀑布流效果圖原生實現瀑布流文件圖片可以自己找點替換下就可以了文件添加陰影的時候，加上會顯得更加有點懸浮感文件計算圖片列數 使用css實現瀑布流并不實用，因為css實現的瀑布流都是以列來排列的，這里記錄下用js實現瀑布流，以及微信小程序中使用左右兩列來實現瀑布流 1.效果圖...

    imingyu 評論0 收藏0

  • 原生 JS 實現一個瀑布流插件

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

    Alfred 評論0 收藏0

  • 原生 JS 實現一個瀑布流插件

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

    lavnFan 評論0 收藏0

  • 原生 JS 實現一個瀑布流插件

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

    wenyiweb 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<