快捷導(dǎo)航

js實(shí)現(xiàn)瀑布流的三種方式比較

更新時(shí)間：2021年09月17日 08:36:33 作者：jingwhale

瀑布流，又稱瀑布流式布局，是比較流行的一種網(wǎng)站頁面布局，這篇文章主要介紹了js實(shí)現(xiàn)瀑布流的三種方式，感興趣的小伙伴們可以參考一下

瀑布流是一種網(wǎng)站頁面布局，視覺表現(xiàn)為參差不齊的多欄布局，隨著頁面滾動(dòng)條向下滾動(dòng)，這種布局還會(huì)不斷加載數(shù)據(jù)塊并附加至當(dāng)前尾部。最早采用此布局的網(wǎng)站是Pinterest，逐漸在國(guó)內(nèi)流行開來。國(guó)內(nèi)大多數(shù)清新站基本為這類風(fēng)格。

瀑布流特點(diǎn)：

1、琳瑯滿目：整版以圖片為主，大小不一的圖片按照一定的規(guī)律排列。
2、唯美：圖片的風(fēng)格以唯美的圖片為主。
3、操作簡(jiǎn)單：在瀏覽網(wǎng)站的時(shí)候只需要輕輕滑動(dòng)一下鼠標(biāo)滾輪，一切的美妙的圖片精彩便可呈現(xiàn)在你面前。

瀑布流布局實(shí)現(xiàn)方式：

1、傳統(tǒng)多列浮動(dòng)

· 各列固定寬度，并且左浮動(dòng)；
· 一列中的數(shù)據(jù)塊為一組，列中的每塊依次排列；
· 更多數(shù)據(jù)加載時(shí)，需要分別插入到不同的列中；

優(yōu)點(diǎn):

布局簡(jiǎn)單，應(yīng)該說沒啥特別的難點(diǎn)；

不用明確知道數(shù)據(jù)塊高度，當(dāng)數(shù)據(jù)塊中有圖片時(shí)，就不需要指定圖片高度。

缺點(diǎn):

列數(shù)固定，擴(kuò)展不易，當(dāng)瀏覽器窗口大小變化時(shí)，只能固定的x列，如果要添加一列，很難調(diào)整數(shù)據(jù)塊的排列；

滾動(dòng)加載更多數(shù)據(jù)時(shí)，還要指定插入到第幾列中，還是不方便。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>傳統(tǒng)多列浮動(dò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):

只有高級(jí)瀏覽器中才能使用；

還有一個(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、絕對(duì)定位

最優(yōu)的一種方案，方便添加數(shù)據(jù)內(nèi)容，窗口變化，列數(shù)/數(shù)據(jù)塊都會(huì)自動(dòng)調(diào)整；

優(yōu)點(diǎn)：

方便添加數(shù)據(jù)內(nèi)容，窗口變化，列數(shù)/數(shù)據(jù)塊都會(huì)自動(dòng)調(diào)整；

缺點(diǎn):

需要實(shí)現(xiàn)知道數(shù)據(jù)塊高度，如果其中包含圖片，需要知道圖片高度；

JS 動(dòng)態(tài)計(jì)算數(shù)據(jù)塊位置，當(dāng)窗口縮放頻繁，可能會(huì)狂耗性能。

思路：

1) 數(shù)據(jù)塊排列（對(duì)容器中已有元素進(jìn)行排列），算法步驟簡(jiǎn)述下：

設(shè)置（塊元素寬度一致）

· 初始化時(shí)，對(duì)容器中已有數(shù)據(jù)塊元素進(jìn)行第一次計(jì)算，需要用戶給定: a，容器元素 — 以此獲取窗口總寬度； b，列寬度（塊元素寬度）； c，最小列數(shù)；
·計(jì)算顯示列數(shù)：窗口寬度除以一個(gè)塊框?qū)挾认蛳氯≌⒃O(shè)置waterfall顯示的居中
·存儲(chǔ)每列的高度
· 獲得列數(shù)后，需要保存每個(gè)列的當(dāng)前高度，這樣在添加每個(gè)數(shù)據(jù)塊時(shí)，才知道起始高度是多少；
· 依次取容器中的所有數(shù)據(jù)塊，先尋找當(dāng)前高度最小的某列，之后根據(jù)列序號(hào)，確定數(shù)據(jù)塊的left，top值，left 為所在列的序號(hào)乘以列寬，top 為所在列的當(dāng)前高度，最后更新所在列的當(dāng)前高度加上這個(gè)數(shù)據(jù)塊元素的高度，至此，插入一個(gè)元素結(jié)束；
· 當(dāng)所有元素插入完畢后，調(diào)整容器的高度為各列最大的高度值，結(jié)束依次調(diào)整。

2) 異步加載數(shù)據(jù)，包含兩個(gè)步驟：

· 綁定滾動(dòng)事件，并確定預(yù)加載線高度值，即滾動(dòng)到哪個(gè)高度后，需要去加載數(shù)據(jù)，其實(shí)這個(gè)就是列的最小高度值，這樣當(dāng)前滾動(dòng)值和最小高度值比較一下即可判斷出來，是否要觸發(fā)加載數(shù)據(jù)；
· 加載數(shù)據(jù)，函數(shù)傳參，能提供加載數(shù)據(jù)函數(shù)和停止加載（加載多少時(shí)停止）函數(shù)，以更方便的控制。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: