Dieser Artikel führt Sie durch das Wasserfall-Flow-Layout und stellt drei zuverlässige JS-Lösungen und N unzuverlässige CSS-Lösungen vor. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.
Im Sinne der Praktikabilität werden wir heute das Wasserfall-Flusslayout teilen (Ein kleiner Bruder hat mich gestern gefragt, wie es geht, und ich habe lange gesucht, konnte es aber nicht finden. Es stellte sich heraus im Intranet zu schreiben).
Demo-Adresse: http://www.lilnong.top/static/html/waterfall.html
Zum Beispiel Petals.com, Mogujie (Bilder habe ich unten gepostet), diese Websites verwenden bei der Anzeige von Inhalten ein Wasserfall-Flow-Layout.
Wir möchten auch eine Seite erstellen, auf der unser Designentwurf angezeigt wird (feste Breite, variable Höhe).
Der Kern des Wasserfall-Flow-Layouts basiert auf einem Rasterlayout, und die Höhe der in jeder Zeile enthaltenen Artikelliste ist zufällig (die Höhe ändert sich dynamisch mit ihrem eigenen Inhalt). In Stapelform angeordnet, was am kritischsten ist. Die Sache ist, dass die Stapel keinen unnötigen Abstand untereinander haben. Schauen wir uns das Bild oben an, um zu sehen, wie das Wasserfall-Flusslayout aussieht, über das wir sprechen.
| Website | Mogujie | Petal.com | JD | VV |
|---|---|---|---|---|
| Screenshots |  |
 |
|
 |
| Schema | Unterkanal | absolute |
kann auch als reine CSS-Lösung angesehen werden. Im Wesentlichen basiert es auf dem Dokumentenfluss, von links nach rechts , von oben nach oben.
| Grid | Inline | Float | Bootstrap-Grid | |
|---|---|---|---|---|
 |  |
 |
 |
| Screenshot | ||
|---|---|---|
 | 
| Spaltenschema
Es ist so gruseligcolumns: 4; columns-gap: 6px; . columns: 4; column-gap: 6px; 。
flex-flow: column wrap;height: 2300px;flex-flow: Column Wrap;height: 2300px; Standardmäßig ist die Anordnung horizontal. Durch die Änderung der vertikalen Anordnung und das Zulassen von Zeilenumbrüchen wird der Inhalt umbrochen nach fester Höhe.
| Schema | Absolut | Restkanal | Höhe geteilter Kanal berechnen |
|---|---|---|---|
| Kopf-Screenshot | 
|
 |
 |
这里的方案就靠谱起来了，可以满足我们使用要求。
我们来回忆一下我们的需求：展示一些内容，内容有特性定宽，不定高。不定高一般是因为内容长度或者高度不一致导致的，常见内容又分为两种文字和图片。
文字的话，在没有异步字体的情况下，可以理解为同步就可以获取到盒子高度。
图片的话，因为加载是异步的，所以获取盒子的真实高度也是异步的。但是这里一般分为两种情况
无高度，那么可以通过onload来监听图片加载完成。等图片加载完成再去获取高度。
// 用于获取图片的真实高度 naturalHeight: 1180 // 用于获取图片的真实宽度 naturalWidth: 1200 //用户获取图片当前的渲染高度（会受 css 影响） height: 98 //用户获取图片当前的渲染宽度（会受 css 影响） width: 100 // 可返回浏览器是否已完成对图像的加载。如果加载完成，则返回 true，否则返回 fasle。 complete 属性 // 可以监听到图片加载完成的动作 onload
基于上面的内容，那我们可以先判断 complete 属性，
function getImageSize(img){
if(img.complete){
return Promise.resolve({
naturalHeight: img.naturalHeight,
naturalWidth: img.naturalWidth,
height: img.height,
width: img.width,
})
}else{
return new Promise((resolve, reject)=>{
img.addEventListener('load', ()=>{
resolve({
naturalHeight: img.naturalHeight,
naturalWidth: img.naturalWidth,
height: img.height,
width: img.width,
})
})
})
}
}
/*
// 测试用例
el = document.createElement('img');
el.src = 'http://cors-www.lilnong.top/favicon.ico?'+Math.random()
getImageSize(el).then(console.log).catch(console.error)
setTimeout(()=>getImageSize(el).then(console.log).catch(console.error), 1000)
*/因为普通的布局已经无法满足我们的需求，所以我们可以考虑通过 position: absolute 来使内容通过绝对定位来显示。
核心操作就是维护每个元素的 left、top，然后使用 left 和 top 去渲染到正确位置。
getListPosition(){
// 视口宽度 / 每列宽度 得出划分为几列
let col = this.screenWidth / this.itemWidth >> 0;
var arr = [];
for(var i = 0; i < col; i++) arr.push({
list: [],
height: 0,
})
// 遍历所有元素
this.listInfo.forEach((item,idx)=>{
// 找到最低的一列
var colIndex = 0;
for(var i = 1; i < col; i++){
if(arr[colIndex].height > arr[i].height){
// colItem = arr[i]
colIndex = i
}
}
// 修改元素的信息
// 所属列
item.line = colIndex;
// 计算之后的 top 距离
item.top = arr[colIndex].height+ 'px';
// 计算之后的 left 距离
item.left = colIndex * (this.itemWidth + 10) + 'px'
// 累加操作
arr[colIndex].list.push(item);
arr[colIndex].height += item.height + 10;
})
return arr
},通过计算，我们可以到，瀑布流布局下每个元素的位置，通过绝对定位就可以实现。
因为上个方案用到了绝对定位，那么有没有不用绝对定位的方案呢？回到我们的问题点上 定宽，不定高，那我们完全可以通过分开渲染放弃 absolute 来实现。
jsGroupList(){
return this.list.reduce((s,n,idx)=>{
// 根据下标，直接分配所属列
s[idx % 4].push({idx: idx, item: n})
return s
}, [[],[],[],[],])
},看开头是实现类似的功能的，但是有一个弊端（快来评论区回复呀）。
因为上一个方案是按下标分类的，其实瀑布流是按高度分类的，所以我们分类条件换成最低的列。
jsGroupHeightList(){
var list = [
{height: 0, list: []},{height: 0, list: []},
{height: 0, list: []},{height: 0, list: []},
]
// 遍历每个元素
for(var i = 0; i < this.list.length; i++){
// 当元素有大小的时候在进行操作。
if(!this.listInfo[i].height) return list;
// 默认第一个通道是最小高度列
var minHeightItem = list[0];
// 计算最小高度列
list.forEach(v=>{
if(v.height < minHeightItem.height) minHeightItem = v
})
// 把新的元素高度累加到列中。
minHeightItem.height += this.listInfo[i].height
// 把新的元素push到列中
minHeightItem.list.push({idx: i, item: this.list[i]})
}
return list;
},好了，到这里我能想到的方案就都介绍了。你还有什么方案吗？咱们可以在评论区讨论一下可行性。接下来就是我们的方案总结了。
| 方案 | 优点 | 缺点 | 点评 |
|---|---|---|---|
| columns | 实现简单、纯 CSS 方案 | 兼容性 | - |
| flex | - | 需要固定高度，填充难以控制等问题 | - |
| float、inline、bootstrapGrid | - | - | 没点大都用不出这方案 |
| grid | - | - | 可以nth-child模拟实现、或者等待兼容性 masonry |
| absolute | 效果好 | - | JS计算无限可能 |
| js普通通道 | - | 填充难以控制 | - |
| js优化通道 | 效果好、无绝对定位 | 在出现夸列等操作的时候不是很好控制 | - |
更多编程相关知识，请访问：编程入门！！
Das obige ist der detaillierte Inhalt vonFür die Implementierung des Wasserfall-Flow-Layouts mit JS oder CSS werden verschiedene Lösungen vorgestellt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
