當(dāng)前位置：首頁(yè) > IT課程問(wèn)答
H5教學(xué)-瀑布流
時(shí)間：2023-04-23 來(lái)源：華清遠(yuǎn)見(jiàn)
瀑布流
一、認(rèn)識(shí)瀑布流
瀑布流，又稱(chēng)瀑布流式布局。最早采用此布局的網(wǎng)站是Pinterest，視覺(jué)效果表現(xiàn)為參差不齊的多欄布局，即多行等寬不等高的元素依次排列。瀑布流布局的具體效果如下圖：
二、為什么要使用瀑布流
目前大多數(shù)網(wǎng)站采用的布局都是有規(guī)律的多列布局，即每列等寬，每行等高。而參差不齊的瀑布流式布局能給用戶(hù)不一樣的視覺(jué)沖擊效果。另外瀑布流結(jié)合下拉刷新，上拉加載進(jìn)行數(shù)據(jù)的懶加載等操作，對(duì)于用戶(hù)的體驗(yàn)感也是非常好的。
瀑布流主要針對(duì)的是帶圖片網(wǎng)站的內(nèi)容展示，對(duì)于大小不一的圖片按照一定的規(guī)律排列。即對(duì)大小不一的圖片，讓其等比縮放的顯示在頁(yè)面中，可保證圖片不失真，可以有效的提高用戶(hù)體驗(yàn)。
三、瀑布流的圖例分析
先用圖片分析一下我們想要的瀑布流是什么樣的
如下圖所示，假設(shè)一排五列。第一排排滿(mǎn)后，顯示的是這樣的。那么我們要放第6張圖片的時(shí)候，應(yīng)該放在什么位置呢？
按照正常邏輯，第六張應(yīng)該是放在第一張圖片下面，然后依次水平排列過(guò)去，如下圖：
但這樣下去可能會(huì)導(dǎo)致每列之間的高度差距越來(lái)越大，并不符合實(shí)際瀑布流效果要求，在瀑布流中，從第六張圖片開(kāi)始，接下去的每一張圖片都應(yīng)該放在高度最低的那一列圖片下方。如下圖：
即從第六張圖片開(kāi)始都需要計(jì)算哪一列的圖片累計(jì)的高度最小，然后下一張圖片就應(yīng)該放在哪一列。
四、具體實(shí)現(xiàn)
HTML代碼
加載中...
CSS代碼
* {
margin: 0;
padding: 0;
}
.content {
width: 1240px;
margin: 0 auto;
position: relative;
}
.shop {
width: 240px;
border: 1px solid #f00;
box-sizing: border-box;
position: absolute;
}
.shop img {
width: 100%;
}
.shopName{
height: 60px;
}
.loadBox {
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
color: gray;
font-size: 14px;
}
.loadBox img{
animation: load 0.8s infinite;
}
@keyframes load {
from{
transform: rotate(0);
}to{
transform: rotate(360deg);
}
}
JS代碼
let data = [{
id: 1,
shopname: '圖片1',
imgUrl:
"https://img1.baidu.com/it/u=709381787,3386403196&fm=253&fmt=auto&app=138&f=JPEG?w=599&h=500"
}, {
id: 2,
shopname: '圖片2',
imgUrl: "https://img0.baidu.com/it/u=1489670366,411382419&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=753"
}, {
id: 3,
shopname: '圖片3',
imgUrl: "https://img1.baidu.com/it/u=3255035444,3515309779&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666"
}, {
id: 4,
shopname: '圖片4',
imgUrl: "https://img2.baidu.com/it/u=3173263148,4118504965&fm=253&fmt=auto&app=138&f=JPEG?w=620&h=500"
}, {
id: 5,
shopname: '圖片5',
imgUrl: "https://img0.baidu.com/it/u=2628882850,1202220801&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=498"
}, {
id: 6,
shopname: '圖片6',
imgUrl: "https://img1.baidu.com/it/u=740708162,4263244726&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"
}, {
id: 7,
shopname: '圖片7',
imgUrl: "https://img1.baidu.com/it/u=701043886,582191677&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
}, {
id: 8,
shopname: '圖片8',
imgUrl: "https://img0.baidu.com/it/u=3878848433,891453978&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667"
}, {
id: 9,
shopname: '圖片9',
imgUrl: "https://img1.baidu.com/it/u=1621477098,3345707124&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=771"
}, {
id: 10,
shopname: '圖片10',
imgUrl: "https://img1.baidu.com/it/u=2062807354,75688956&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
}, {
id: 11,
shopname: '圖片11',
imgUrl: "https://img2.baidu.com/it/u=1190852256,1138303662&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375"
}, {
id: 12,
shopname: '圖片12',
imgUrl: "https://img0.baidu.com/it/u=2280903142,1037129928&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500"
}, {
id: 13,
shopname: '圖片13',
imgUrl: "https://img0.baidu.com/it/u=1911023561,1873370868&fm=253&fmt=auto&app=138&f=JPEG?w=282&h=500"
}, {
id: 14,
shopname: '圖片14',
imgUrl: "https://img0.baidu.com/it/u=1303056880,3446954677&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=667"
}, {
id: 15,
shopname: '圖片15',
imgUrl: "https://img0.baidu.com/it/u=2463246409,2913214612&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500"
}, {
id: 16,
shopname: '圖片16',
imgUrl: "https://img1.baidu.com/it/u=673572676,3486461689&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500"
}, {
id: 17,
shopname: '圖片17',
imgUrl: "https://img0.baidu.com/it/u=1118388590,847334752&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
}, {
id: 18,
shopname: '圖片18',
imgUrl: "https://img2.baidu.com/it/u=1392060445,3405288279&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=500"
}];
let content = document.querySelector('.content');
function getData() {
return new Promise((resolve, reject) => {
setInterval(() => {
resolve(data);
}, 600);//假設(shè)發(fā)起網(wǎng)絡(luò)請(qǐng)求數(shù)據(jù)需要600ms
});
}
let colHeight = [];//用于存儲(chǔ)每一列的高度
let lastShop = null;//用于存儲(chǔ)最后放入content的div
async function showData(isScroll=false) {
let r = await getData();
let shopBox = document.createDocumentFragment();
r.forEach((item, index) => {
// 創(chuàng)建圖片
let img = new Image();
img.src = item.imgUrl;
let imgInfo = item.imgUrl.split("?")[1].split("&");
/*
imgHeight imgWidth:240
imgInfo[1].split("=")[1] imgInfo[0].split("=")[1]
*/
let imgHeight = imgInfo[1].split("=")[1]*240/imgInfo[0].split("=")[1];
img.style.height = imgHeight + 'px';
// 創(chuàng)建圖片div
let shopdiv = document.createElement('div');
shopdiv.classList.add('shop');
// 創(chuàng)建放圖片名字的div
let shopNameDiv = document.createElement('div');
shopNameDiv.classList.add('shopName');
shopNameDiv.innerHTML = item.shopname;
let left;
let top = 0;
if(index<=4&&!isScroll){
colHeight.push(imgHeight+60+2+10);//第一行：圖片高度+文字div高度60+上下邊框2+底部間距10
// 計(jì)算放每個(gè)圖片的div的left值
left = (240 + 12) * (index % 5);
}else{
//需要每次計(jì)算找到最低的一列
let minColH = Math.min(...colHeight);//最低一列的高度
let minCol = colHeight.indexOf(minColH);//找出最低的是第幾列
// console.log(minCol,minColH);
// 計(jì)算放每個(gè)圖片的div的left值
left = (240 + 12) * minCol;
// 計(jì)算放每個(gè)圖片的div的top值
top = minColH;
// 改變每一列的高度
colHeight[minCol] += imgHeight+60+2+10;//imgHeight+60+2+10: 圖片高度+文字div高度60+上下邊框2+底部間距10
}
shopdiv.style.top = top + 'px';
shopdiv.style.left = left + 'px';
shopdiv.append(img);
shopdiv.append(shopNameDiv);
shopBox.append(shopdiv);
if(index == r.length-1){//判斷是否是最后一條數(shù)據(jù)
lastShop = shopdiv;
}
});
content.append(shopBox);
}
showData();
let flag = false;//用于判斷觸底加載數(shù)據(jù)是否加載完成
window.onscroll = async function () {//監(jiān)聽(tīng)滾動(dòng)條滾動(dòng)
if (lastShop.getBoundingClientRect().y < window.innerHeight+500 && flag == false) {//觸底加載新數(shù)據(jù)
flag = true;//正在加載
await showData(true);
flag = false;//加載完成
}
}
最終效果圖如下：
課程分享：華清遠(yuǎn)見(jiàn)聯(lián)合NXP推出i.MX8M Plus開(kāi)發(fā)與實(shí)踐課程分享：鴻蒙HarmonyOS系統(tǒng)及物聯(lián)網(wǎng)開(kāi)發(fā)實(shí)戰(zhàn)課程（課程分享：HaaS EDU K1開(kāi)發(fā)教程（附課程視頻及源碼下新版C語(yǔ)言編程之控制語(yǔ)句視頻教程重磅贈(zèng)送（嵌入式入價(jià)值2000元的嵌入式精裝教程大禮包免費(fèi)送！（搞懂嵌入價(jià)值1000元的最新ARM系列視頻完整版教程新鮮出爐（免【最新】ARM課程課堂實(shí)錄精華版視頻免費(fèi)領(lǐng)�。▋�(nèi)含源華清遠(yuǎn)見(jiàn)上海中心喬遷新居，開(kāi)啟全新發(fā)展篇章！華清遠(yuǎn)見(jiàn)連續(xù)9年獲ISO9001質(zhì)量管理體系認(rèn)證，匠心做產(chǎn)華清遠(yuǎn)見(jiàn)關(guān)于教育部高教司2023年產(chǎn)學(xué)合作協(xié)同育人項(xiàng)目華清遠(yuǎn)見(jiàn)再獲兩項(xiàng)計(jì)算機(jī)軟件著作權(quán)登記證書(shū)，行業(yè)實(shí)力華清遠(yuǎn)見(jiàn)嵌入式師資班圓滿(mǎn)收官，虛擬仿真全面構(gòu)建系統(tǒng)華清遠(yuǎn)見(jiàn)被授予中國(guó)電子學(xué)會(huì)“電子信息人才能力提升工企校協(xié)同創(chuàng)新大賽全國(guó)總決賽在清華大學(xué)圓滿(mǎn)收官，華清華清遠(yuǎn)見(jiàn)教育集團(tuán)再次入選教育部供需對(duì)接就業(yè)育人項(xiàng)目華清遠(yuǎn)見(jiàn)關(guān)于提醒學(xué)員謹(jǐn)防網(wǎng)絡(luò)詐騙的嚴(yán)正聲明華清遠(yuǎn)見(jiàn)協(xié)辦“技能興魯”職業(yè)技能大賽人工智能賽項(xiàng)圓
