js實(shí)現(xiàn)瀑布流的三種方式比較
瀑布流是一種網(wǎng)站頁面布局，視覺表現(xiàn)為參差不齊的多欄布局，隨著頁面滾動條向下滾動，這種布局還會不斷加載數(shù)據(jù)塊并附加至當(dāng)前尾部。最早采用此布局的網(wǎng)站是Pinterest，逐漸在國內(nèi)流行開來。國內(nèi)大多數(shù)清新站基本為這類風(fēng)格。
瀑布流特點(diǎn)：
1、琳瑯滿目：整版以圖片為主，大小不一的圖片按照一定的規(guī)律排列。
2、唯美：圖片的風(fēng)格以唯美的圖片為主。
3、操作簡單：在瀏覽網(wǎng)站的時(shí)候只需要輕輕滑動一下鼠標(biāo)滾輪，一切的美妙的圖片精彩便可呈現(xiàn)在你面前。
瀑布流布局實(shí)現(xiàn)方式：
1、傳統(tǒng)多列浮動
- · 各列固定寬度，并且左浮動；
- · 一列中的數(shù)據(jù)塊為一組，列中的每塊依次排列；
- · 更多數(shù)據(jù)加載時(shí)，需要分別插入到不同的列中；
優(yōu)點(diǎn):
布局簡單，應(yīng)該說沒啥特別的難點(diǎn)；
不用明確知道數(shù)據(jù)塊高度，當(dāng)數(shù)據(jù)塊中有圖片時(shí)，就不需要指定圖片高度。
缺點(diǎn):
列數(shù)固定，擴(kuò)展不易，當(dāng)瀏覽器窗口大小變化時(shí)，只能固定的x列，如果要添加一列，很難調(diào)整數(shù)據(jù)塊的排列；
滾動加載更多數(shù)據(jù)時(shí)，還要指定插入到第幾列中，還是不方便。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>傳統(tǒng)多列浮動</title>
<style>
div{
float:left;
margin: 5px 5px 5px 5px;
}
p{
background: #90EE90;
width:160px;
text-align:center;
}
</style>
</head>
<body>
<div>
<p style="height:230px;">a1</p>
<p style="height:100px;">a2</p>
</div>
<div>
<p style="height:100px;">a3</p>
<p style="height:300px;">a4</p>
</div>
<div>
<p style="height:250px;">a5</p>
<p style="height:200px;">a6</p>
</div>
</body>
</html>
效果：
2、CSS3 樣式定義
優(yōu)點(diǎn):
直接 CSS 定義，最方便了；
擴(kuò)展方便，直接往容器里添加內(nèi)容即可。
缺點(diǎn):
只有高級瀏覽器中才能使用；
還有一個(gè)缺點(diǎn)，他的數(shù)據(jù)塊排列是從上到下排列到一定高度后，再把剩余元素依次添加到下一列，這個(gè)本質(zhì)上就不一樣了；
鑒于這兩個(gè)主要缺點(diǎn)，注定了該方法只能局限于高端瀏覽器，而且，更適合于文字多欄排列。
示例
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS3瀑布布局</title>
<style>
.container{
-webkit-column-width:160px;
-moz-column-width:160px;
-o-colum-width:160px;
-webkit-column-gap:1px;
-moz-column-gap:1px;
-o-column-gap:1px;
}
div:not(.container){
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
background:#90EE90;
border::#CCC 1px solid;
display:inline-block;
width:157px;
position:relative;
margin:2px;
}
.title{
line-height:80px; font-size:18px; color:#999;
text-align:center;
font-family:"Microsoft YaHei";
}
</style>
</head>
<body>
<section>
<div class="container">
<div style="height:80px" class="title">純CSS3瀑布布局</div>
<div style="height:260px"></div>
<div style="height:65px"></div>
<div style="height:120px"></div>
<div style="height:145px"></div>
<div style="height:90px"></div>
<div style="height:145px"></div>
<div style="height:160px"></div>
<div style="height:65px"></div>
<div style="height:230px"></div>
<div style="height:140px"></div>
<div style="height:85px"></div>
<div style="height:20px"></div>
<div style="height:145px"></div>
<div style="height:50px"></div>
<div style="height:65px"></div>
<div style="height:230px"></div>
<div style="height:140px"></div>
<div style="height:85px"></div>
<div style="height:20px"></div>
<div style="height:145px"></div>
<div style="height:50px"></div>
<div style="height:145px"></div>
<div style="height:160px"></div>
<div style="height:240px"></div>
</div>
</section>
</body>
</html>
效果：
3、絕對定位
最優(yōu)的一種方案，方便添加數(shù)據(jù)內(nèi)容，窗口變化，列數(shù)/數(shù)據(jù)塊都會自動調(diào)整；
優(yōu)點(diǎn)：
方便添加數(shù)據(jù)內(nèi)容，窗口變化，列數(shù)/數(shù)據(jù)塊都會自動調(diào)整；
缺點(diǎn):
需要實(shí)現(xiàn)知道數(shù)據(jù)塊高度，如果其中包含圖片，需要知道圖片高度；
JS 動態(tài)計(jì)算數(shù)據(jù)塊位置，當(dāng)窗口縮放頻繁，可能會狂耗性能。
思路：
1) 數(shù)據(jù)塊排列（對容器中已有元素進(jìn)行排列），算法步驟簡述下：
設(shè)置（塊元素寬度一致）
· 初始化時(shí)，對容器中已有數(shù)據(jù)塊元素進(jìn)行第一次計(jì)算，需要用戶給定: a，容器元素 — 以此獲取窗口總寬度； b，列寬度（塊元素寬度）； c，最小列數(shù)；
·計(jì)算顯示列數(shù)：窗口寬度除以一個(gè)塊框?qū)挾认蛳氯≌?，并設(shè)置waterfall顯示的居中
·存儲每列的高度
· 獲得列數(shù)后，需要保存每個(gè)列的當(dāng)前高度，這樣在添加每個(gè)數(shù)據(jù)塊時(shí)，才知道起始高度是多少；
· 依次取容器中的所有數(shù)據(jù)塊，先尋找當(dāng)前高度最小的某列，之后根據(jù)列序號，確定數(shù)據(jù)塊的left，top值，left 為所在列的序號乘以列寬，top 為所在列的當(dāng)前高度，最后更新所在列的當(dāng)前高度加上這個(gè)數(shù)據(jù)塊元素的高度，至此，插入一個(gè)元素結(jié)束；
· 當(dāng)所有元素插入完畢后，調(diào)整容器的高度為各列最大的高度值，結(jié)束依次調(diào)整。
2) 異步加載數(shù)據(jù)，包含兩個(gè)步驟：
· 綁定滾動事件，并確定預(yù)加載線高度值，即滾動到哪個(gè)高度后，需要去加載數(shù)據(jù)，其實(shí)這個(gè)就是列的最小高度值，這樣當(dāng)前滾動值和最小高度值比較一下即可判斷出來，是否要觸發(fā)加載數(shù)據(jù)；
· 加載數(shù)據(jù)，函數(shù)傳參，能提供加載數(shù)據(jù)函數(shù)和停止加載（加載多少時(shí)停止）函數(shù)，以更方便的控制。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。
- js實(shí)現(xiàn)的美女瀑布流效果代碼
- javascript自適應(yīng)寬度的瀑布流實(shí)現(xiàn)思路
- 原生JS實(shí)現(xiàn)響應(yīng)式瀑布流布局
- 微信小程序通過js實(shí)現(xiàn)瀑布流布局詳解
- 解析瀑布流布局:JS+絕對定位的實(shí)現(xiàn)
- 純js實(shí)現(xiàn)瀑布流展現(xiàn)照片(自動適應(yīng)窗口大小)
- vue.js組件vue-waterfall-easy實(shí)現(xiàn)瀑布流效果
- js實(shí)現(xiàn)瀑布流的一種簡單方法實(shí)例分享
- 純js實(shí)現(xiàn)瀑布流布局及ajax動態(tài)新增數(shù)據(jù)
- JavaScript實(shí)現(xiàn)瀑布動畫
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了純js實(shí)現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
javascript json對象小技巧之鍵名作為變量用法分析
優(yōu)雅的使用javascript遞歸畫一棵結(jié)構(gòu)樹示例代碼
