資訊專欄INFORMATION COLUMN
摘要：瀑布流又稱瀑布流式布局，是比較流行的一種網(wǎng)站頁(yè)面布局方式。那么規(guī)則是什么呢下面通過(guò)圖解來(lái)分析一下瀑布流的算法?？炊@個(gè)圖示應(yīng)該就能理解了瀑布流的原理算法。
瀑布流又稱瀑布流式布局，是比較流行的一種網(wǎng)站頁(yè)面布局方式。視覺(jué)表現(xiàn)為參差不齊的多欄布局，最早采用此布局的是網(wǎng)站是 Pinterest，后逐漸在國(guó)內(nèi)流行。
即多行等寬元素排列，后面的元素依次添加到其后，等寬不等高，根據(jù)圖片原比例縮放直至寬度達(dá)到我們的要求，依次按照規(guī)則放入指定位置。
那么規(guī)則是什么呢？
下面通過(guò)圖解來(lái)分析一下瀑布流的算法。
當(dāng)?shù)谝慌排艥M足夠多的等寬圖片時(shí)（如下圖情況），自然而然的考慮到之后放置的圖片會(huì)往下面排放。
那么第六張圖片，放置在什么位置呢？是下圖的位置么？
我們通過(guò)瀑布流算法實(shí)驗(yàn)得到，后面緊跟的第六張圖片的位置應(yīng)該是這個(gè)位置。
為什么呢？
因?yàn)榉胖盟?，這一列的高度為所有列中最小，所以會(huì)放置在這個(gè)地方。
所以我們知道了，如果再繼續(xù)放置下去，第七張圖片應(yīng)該是這個(gè)位置，對(duì)嗎？
通過(guò)瀑布流算法實(shí)驗(yàn)得出位置正確?？炊@個(gè)圖示應(yīng)該就能理解了瀑布流的原理算法。
這里使用了jQuery
var colCount //定義列數(shù) var colHeightArry= [] //定義列高度數(shù)組 var imgWidth = $(.waterfall img).outerWidth(true) //單張圖片的寬度 colCount = parseInt($(.waterfall).width()/imgWidth) //計(jì)算出列數(shù) for(var i = 0 ; i < colCount; i ++){ colHeightArry[i] = 0 } //[0,0,0] $(.waterfall img).on(load,function(){ var minValue = colHeightArry[0] //定義最小的高度 var minIndex = 0 //定義最小高度的下標(biāo) for(var i = 0 ; i < colCount; i ++){ if(colHeightArry[i] < minValue){ //如果最小高度組數(shù)中的值小于最小值 minValue = colHeightArry[i] //那么認(rèn)為最小高度數(shù)組中的值是真正的最小值 minIndex = i //最小下標(biāo)為當(dāng)前下標(biāo) } } $(this).css({ left: minIndex * imgWidth, top: minValue }) colHeightArry[minIndex] += $(this).outerHeight(true) }) //當(dāng)窗口大小重置之后，重新執(zhí)行 $(window).on(resize,function(){ reset() }) //當(dāng)窗口加載完畢，執(zhí)行瀑布流 $(window).on(load,function(){ reset() }) //定義reset函數(shù) function reset(){ var colHeightArry= [] colCount = parseInt($(.waterfall).width()/imgWidth) for(var i = 0 ; i < colCount; i ++){ colHeightArry[i] = 0 } $(.waterfall img).each(function(){ var minValue = colHeightArry[0] var minIndex = 0 for(var i = 0 ; i < colCount; i ++){ if(colHeightArry[i] < minValue){ minValue = colHeightArry[i] minIndex = i } } $(this).css({ left: minIndex * imgWidth, top: minValue }) colHeightArry[minIndex] += $(this).outerHeight(true) }) }View Code
瀑布流 Demo 效果
瀑布流 + 懶加載 實(shí)現(xiàn)新聞?wù)?/strong>
https://github.com/evenyao/waterfall-sinanews
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1894.html
摘要：是規(guī)則的瀑布流。普通的尺寸會(huì)出現(xiàn)錯(cuò)位的問(wèn)題索引這個(gè)是右邊這個(gè)是左邊間距解決辦法，可以通過(guò)里的來(lái)判斷，這個(gè)方法不管你高度怎樣，他都是左右左右開(kāi)始排列的。 目錄介紹 01.規(guī)則瀑布流實(shí)現(xiàn)02.不規(guī)則瀑布流實(shí)現(xiàn)2.1 實(shí)現(xiàn)方式2.2 遇到問(wèn)題03.瀑布流上拉加載04.給瀑布流設(shè)置分割線05.自定義Manager崩潰06.如何避免刷新抖動(dòng)07.為何有時(shí)出現(xiàn)跳動(dòng)08.瀑布流圖片優(yōu)化09.onBi...
摘要：用戶體驗(yàn)的需求，完美地保留了瀑布流模態(tài)框的閱讀模式。不支持的話，就不攔截瀑布流文塊的，也就是直接讓其跳轉(zhuǎn)。 背景 想當(dāng)年，我做了一個(gè)新媒體網(wǎng)站項(xiàng)目（AIISPO，已下線）。跟普通資訊網(wǎng)站不一樣的是，老板要求PC端前臺(tái)的文章閱讀模式一定得是瀑布流+模態(tài)框。瀑布流指的是以瀑布流的形式將文章羅列出來(lái)，而模態(tài)框則指的是點(diǎn)擊瀑布流中代表文章的某個(gè)文塊時(shí)，直接在當(dāng)前頁(yè)面彈出模態(tài)框來(lái)顯示文章正文。 ...
摘要：用戶體驗(yàn)的需求，完美地保留了瀑布流模態(tài)框的閱讀模式。不支持的話，就不攔截瀑布流文塊的，也就是直接讓其跳轉(zhuǎn)。 背景 想當(dāng)年，我做了一個(gè)新媒體網(wǎng)站項(xiàng)目（AIISPO，已下線）。跟普通資訊網(wǎng)站不一樣的是，老板要求PC端前臺(tái)的文章閱讀模式一定得是瀑布流+模態(tài)框。瀑布流指的是以瀑布流的形式將文章羅列出來(lái)，而模態(tài)框則指的是點(diǎn)擊瀑布流中代表文章的某個(gè)文塊時(shí)，直接在當(dāng)前頁(yè)面彈出模態(tài)框來(lái)顯示文章正文。 ...
瀑布流的布局自我感覺(jué)還是很吸引人的，最近又看到實(shí)現(xiàn)瀑布流這個(gè)做法，在這里記錄下，特別的，感覺(jué)flex布局實(shí)現(xiàn)瀑布流還是有點(diǎn)懵的樣子，不過(guò)現(xiàn)在就可以明白它的原理了 1.multi-column多列布局實(shí)現(xiàn)瀑布流 先簡(jiǎn)單的講下multi-column相關(guān)的部分屬性 column-count設(shè)置列數(shù) column-gap設(shè)置列與列之間的間距 column-width設(shè)置每列的寬度 還要結(jié)合在子容器中...
閱讀 769·2023-04-25 19:43
閱讀 4022·2021-11-30 14:52
閱讀 3855·2021-11-30 14:52
閱讀 3909·2021-11-29 11:00
閱讀 3839·2021-11-29 11:00
閱讀 3949·2021-11-29 11:00
閱讀 3613·2021-11-29 11:00
閱讀 6310·2021-11-29 11:00
