什么是圖片瀑布流

創(chuàng)新互聯(lián)建站專業(yè)為企業(yè)提供普寧網(wǎng)站建設(shè)、普寧做網(wǎng)站、普寧網(wǎng)站設(shè)計(jì)、普寧網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、普寧企業(yè)網(wǎng)站模板建站服務(wù)，十載普寧做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

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

用一張花瓣網(wǎng)頁(yè)的圖片布局可以很清楚看出圖片瀑布流的樣子：

1、琳瑯滿目：整版以圖片為主，大小不一的圖片按照一定的規(guī)律排列。

2、唯美：圖片的風(fēng)格以唯美的圖片為主。

3、操作簡(jiǎn)單：在瀏覽網(wǎng)站的時(shí)候只需要輕輕滑動(dòng)一下鼠標(biāo)滾輪，一切的美妙的圖片精彩便可呈現(xiàn)在你面前。

簡(jiǎn)單來(lái)說(shuō)，就是有很多圖片平鋪在頁(yè)面上，每張圖片的寬度相同，但是高度不同，這樣錯(cuò)落有致的排列出 n 列的樣子很像瀑布，于是就有了瀑布流圖片一說(shuō)。

實(shí)現(xiàn)原理

1、第一種方式

第一種方式前提是：圖片的寬度固定，但是列可變（根據(jù)屏幕大小）

通過(guò)上面的介紹，我們知道要實(shí)現(xiàn)瀑布流的前提是寬度一致（假如為100px），高度可以不相同。

我們首先確定排布的列數(shù)（假如為4列），那么第一行只能放4張圖片，然后將每個(gè)圖片的高度放入一個(gè)數(shù)組中（假如為 heightArr = [100,50, 200,30]），當(dāng)我們?cè)诜湃胂乱粡垐D片的時(shí)候就要判斷這個(gè)數(shù)組中哪個(gè)高度是最小的（這里是30），然后還要知道最小的高度所在高度數(shù)組的索引（這里是i = 3），然后我們就可以對(duì)這張圖片進(jìn)行定位：

{
    position: absolute;
    left: i*100 + 'px';
    top: 30 + 'px'
}

如此遍歷剩下的圖片即可。

實(shí)現(xiàn)代碼

下面是未處理的原始代碼，圖片之間間隔很多空白，影響美觀。

下面是處理后的代碼：

2、第二種方式

第二種方式前提是：列是固定的個(gè)數(shù)，然后圖片根據(jù)屏幕的寬度進(jìn)行自適應(yīng)縮放。

這種方式由于圖片是可以縮放的，寬高不好確定，因此不好用定位的方式處理。

我們可以這樣處理，既然知道了列，那么每一列做一個(gè)容器。然后遍歷圖片，將圖片放入容器高度最小的容器中即可。

這里我們使用js來(lái)添加圖片，而不是事先寫(xiě)好在html中了。

實(shí)現(xiàn)代碼

以上就是js實(shí)現(xiàn)圖片瀑布流的兩種方式（附代碼）的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注創(chuàng)新互聯(lián)其它相關(guān)文章！