瀑布流布局就像在游樂園里排隊玩水滑梯一樣有趣!想象一下,你站在一個高高的平臺上,眼前是一排排的水滑道,每個滑道的終點都是個小水池。你站在起點,一溜煙地往下滑,速度飛快!你的朋友們也在旁邊的滑道上滑來滑去,好不熱鬧。
瀑布流布局如此有趣,因為它不像傳統的布局一樣一行行地擺放元素,而是像水滑梯一樣,元素從上到下、從左到右地排列。每個元素的大小不一,就像人們身材各異,有的高,有的矮,有的胖,有的瘦。它們像水滑道上的人一樣緊緊挨著,在空間里形成了一個有趣的錯落有致的景象。
想象一下,你站在最高的滑道上,你是那個最炫酷的元素,所有的目光都聚集在你身上。你自豪地往下滑,經過每個滑道上的人們,他們驚嘆你的高度,贊嘆你的美麗。你順利地滑到終點,掀起一片水花,大家都為你鼓掌歡呼!
瀑布流布局就是這樣有趣又引人注目,每個元素都有機會在舞臺上展示自己的風采。它讓我們的網頁看起來活力十足,像一場歡樂的游樂園冒險!
小紅書上的瀑布流布局
就是這樣,每個商品就像超市里的貨架,展示著各種各樣的內容。你可以往下滑動頁面,看到一個美食的推薦,繼續滑動又遇到了一篇旅行攻略,再往下滑就是一篇關于時尚的文章。這些內容就像超市里的商品,你可以隨心所欲地瀏覽,發現自己感興趣的東西,積極互動,獲取靈感
你以為的這樣
哈哈,雖然不是這樣,但卻有共同的特性
從圖中可以看出它的特性,
從布局角度來看,瀑布流布局更類似網格布局中自動放置網格項目的布局,但又沒有嚴格遵循該布局模式。
最著名的瀑布流布當屬 Pinterest,比如他的搜索結果頁面的布局效果:
我們來看個例子
<div class="masonry--container">
<div class="item">
<img src="https://picsum.photos/1024/860?random=1" alt="">
<h3>Blog Post</h3>
<p>Lorem ipsum dolor si...</p>
</div>
<!-- 省略其他 item -->
</div>
@layer layout {
.masonry--container {
column-count: 4;
column-gap: 1rem;
}
}
在上面的例子中,你會看到整個布局看起來像瀑布流布局。然而,項目(卡片)的順序沿著列運行。也就是說,使用多列布局來實現瀑布流布局和真正的瀑布流布局之間有著關鍵性的區別:“在多列布局中,項目(卡片)是按列顯示的,通常在瀑布流布局中,希望項目(卡片)是按行顯示”。
借網上的一個圖:
因此,多列布局實現的“瀑布流布局”有可能無法滿足我們實際的業務需求。例如,Pinterest 網站的搜索結果頁,期望搜索出來的結果總是排列在前面,比如說頁面最頂部就能看到搜索的結果,而不是像多列布局實現的效果那樣,排在前面的都在第一列。
而且加載更多的時候,我們是希望按行加載的,而不是重新按多列排。
目前單用css還是無法實現真正的瀑布流布局, 即便使用CSS 網格布局中自動放置網格項目的特性(即 grid-auto-flow: dense),也會有諸多問題。
只能通過js來彌補這個上面提到的缺陷 當使用JavaScript來實現按行加載的瀑布流時,可以結合使用DOM操作和CSS樣式來達到效果。以下是一個簡單的JavaScript方案:
首先,創建一個包含瀑布流元素的容器,并為每個元素添加一個自定義的類名,例如".item"。
<div class="container">
<div class="item">瀑布流元素1</div>
<div class="item">瀑布流元素2</div>
...
</div>
接下來,使用JavaScript來控制瀑布流的加載和排序。
window.addEventListener("load", function() {
// 獲取容器和瀑布流元素
const container=document.querySelector(".container");
const items=document.querySelectorAll(".item");
// 記錄每一行的高度
let rowHeights=[];
// 遍歷瀑布流元素,計算每一行的高度并進行排序
items.forEach(function(item) {
// 將元素添加到容器中
container.appendChild(item);
// 獲取元素的高度
const itemHeight=item.offsetHeight;
// 檢查當前行是否有足夠的空間容納元素
const rowIndex=rowHeights.findIndex(function(rowHeight) {
return rowHeight + itemHeight <=container.offsetHeight;
});
if (rowIndex !==-1) {
// 如果有足夠的空間,將元素添加到對應行中
item.style.order=rowIndex;
rowHeights[rowIndex] +=itemHeight;
} else {
// 如果沒有足夠的空間,創建新行并添加元素
const newRow=document.createElement("div");
newRow.classList.add("row");
newRow.appendChild(item);
container.appendChild(newRow);
rowHeights.push(itemHeight);
}
});
});
在這個JavaScript方案中,我們使用offsetHeight屬性獲取到每個瀑布流元素的高度,并根據容器的高度動態計算每一行的高度。然后,通過設置元素的order屬性來實現按行排序的效果。
記得在CSS中設置.row類的樣式,以便美化新創建的行。
.row {
display: flex;
}
以上的JavaScript方案會在頁面加載完成后自動按行加載和排序瀑布流元素
作者:糖墨夕
鏈接:https://juejin.cn/post/7340909611098079273
瀑布流布局概念
瀑布流,又稱瀑布流式布局。是比較流行的一種網站頁面布局,視覺表現為參差不齊的多欄布局,隨著頁面滾動條向下滾動,這種布局還會不斷加載數據塊并附加至當前尾部。最早采用此布局的網站是Pinterest,逐漸在國內流行開來。國內大多數清新站基本為這類風格。
瀑布流布局特點
琳瑯滿目:整版以圖片為主,大小不一的圖片按照一定的規律排列。
唯美:圖片的風格以唯美的圖片為主。
操作簡單:在瀏覽網站的時候只需要輕輕滑動一下鼠標滾輪,一切的美妙的圖片精彩便可呈現在你面前。
代碼實現
源代碼地址:https://github.com/microzz/waterfall-js
效果預覽
在線預覽地址1: http://microzz.cn/waterfall/
在線預覽地址2: https://microzz.github.io/waterfall-js/
瀑布流布局優缺點
布局優點
有效的降低了界面復雜度,節省了空間:我們不再需要臃腫復雜的頁碼導航鏈接或按鈕了。
對觸屏設備來說,交互方式更符合直覺:在移動應用的交互環境當中,通過向上滑動進行滾屏的操作已經成為最基本的用戶習慣,而且所需要的操作精準程度遠遠低于點擊鏈接或按鈕。
更高的參與度:以上兩點所帶來的交互便捷性可以使用戶將注意力更多的集中在內容而不是操作上,從而讓他們更樂于沉浸在探索與瀏覽當中。
布局缺點
有限的用例:
無限滾動的方式只適用于某些特定類型產品當中一部分特定類型的內容。
例如,在電商網站當中,用戶時常需要在商品列表與詳情頁面之間切換,這種情況下,傳統的、帶有頁碼導航的方式可以幫助用戶更穩妥和準確的回到某個特定的列表頁面當中。
額外的復雜度:
那些用來打造無限滾動的JS庫雖然都自稱很容易使用,但你總會需要在自己的產品中進行不同程度的定制化處理,以滿足你們自己的需求;另外這些JS庫在瀏覽器和設備兼容性等方面的表現也參差不齊,你必須做好充分的測試與調整工作。
再見了,頁腳:
如果使用了比較典型的無限滾動加載模式,這就意味著你可以和頁腳說拜拜了。
最好考慮一下頁腳對于你的網站,特別是用戶的重要性;如果其中確實有比較重要的內容或鏈接,那么最好換一種更傳統和穩妥的方式。
千萬不要耍弄你的用戶,當他們一次次的瀏覽到頁面底部,看到頁腳,卻因為自動加載的內容突然出現而無論如何都無法點擊頁腳中的鏈接時,他們會變的越發憤怒。
SEO:
集中在一頁當中動態加載數據,與一頁一頁的輸出相比,究竟那種方式更利于SEO,這是你必須考慮的問題。對于某些以類型網站來說,在這方面進行冒險是很不劃算的。
關于頁面數量的印象:
其實站在用戶的角度來看,這一點并非負面;不過,如果對于你的網站來說,通過更多的內容頁面展示更多的相關信息(包括廣告)是很重要的策略,那么單頁無限滾動的方式對你并不適用。
關于
GitHub:https://github.com/microzz
個人網站:https://microzz.com/
相關鏈接
CSS3實現一個瀑布流布局:https://microzz.com/2017/02/19/waterfallcss3/
jQuery實現一個瀑布流布局:https://microzz.com/2017/02/20/waterfalljq/
擊查看瀑布特效
實話說,這不像是一個瀑布,倒像是天上下石頭,但是咱們寫代碼的,不要在意這些細節,重點是思路,邏輯,以及具體實現效果的方法。在布局方面,因為是用HTML5/canvas,所以只需要一個canvas畫布即可,也就是一行代碼:
<canvas id="canvas" width="400" height="500"></canvas>
CSS樣式也只需要大概的設置下,代碼量不多,這次的效果重點是javascript的代碼,因為都是用的原生javascript,沒有調用插件,看過我以前寫的特效的朋友就知道,我一般都強調的就是基礎的原生javascript的重要性,特別是現在各種插件以及框架流行,初學者一旦盲目的去學框架,而忽略原生javascript的話其實是很難找工作的,因為每個公司使用的插件以及框架都未必是一樣的,也未必會一直使用。但是如果你原生javascript的基礎很扎實,那么不管是什么框架或者插件,你都能在很短時間內掌握,使用,迅速創造價值,這也是很多公司喜歡的人才!萬丈高樓平地起!不多說,直接上源碼!
如果想要更多的企業求職加分項目,案例,學習方法可以來一下我的前端群570946165,每天都會精挑細選一個特效,項目出來詳細講解,分享!包括答疑解惑!
HTML5+javascript打造瀑布特效源碼:
代碼過長需要文檔版源碼來我的前端群570946165,已上傳到群文件
頭條號里有許多web前端學習視頻/源碼,企業常用特效/案例/項目,敬請關注!
這是哪?
*請認真填寫需求信息,我們會在24小時內與您取得聯系。