Für die Implementierung des Wasserfall-Flow-Layouts mit JS oder CSS werden verschiedene Lösungen vorgestellt

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

Wie ist das Wasserfall-Flusslayout?

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

Grid, Inline, Float Magic-Lösung

kann auch als reine CSS-Lösung angesehen werden. Im Wesentlichen basiert es auf dem Dokumentenfluss, von links nach rechts , von oben nach oben.

SchemaGridInlineFloatBootstrap-GridScreenshot

Sie können sehen, dass es im Dokumentflusslayout ein sehr offensichtliches Konzept von Linien gibt. Wenn eine Linie gedehnt wird, bleibt ein Leerraum und die Linien überlappen sich nicht. Das Magischste hier ist das Float-Layout. DOM-Struktur

div.list     // 设置 gird 或者 block，注意清除浮动
  div.item   // 设置为 inline 或者 float，使其能流动
    img      // 设置定宽，高度自适应，间距等。

Grid-Lösungsbeschreibung

.wrap-waterfall--grid img{vertical-align: top;width: 100px}
.wrap-waterfall--grid .list{
    display: grid;
    grid-gap: 10px;
    /* 可以看到，网格大小，占据位置是需要提前设定的 */
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(50px, auto);
}

Grid ist in manchen Fällen besser zu verwenden als Flex. Beispielsweise müssen Sie „die Zeilenbeschränkung durchbrechen“, dies gilt jedoch nur für feste Layouts, wie z. B. das folgende Layout. Wie würden Sie es ohne Verwendung eines Rasters implementieren?

Es gibt einen Plan, das Wasserfall-Flow-Layout von GIRD im Internet zu implementieren

, aber ich habe einige davon gesehen, entweder mit Farbblöcken oder mit Bildverformung und Zuschnitt. Der Plan sieht vor, nth-child zum Festlegen zu verwenden Größe, Es ist so gruselig

.

Spalten, flexible CSS-Implementierung Unzuverlässige Lösung

Es ist auch eine reine CSS-Lösung, die Lösung ist bereits akzeptabel, es gibt jedoch noch einige Probleme. Die Reihenfolge erfolgt zuerst vertikal, dann horizontal

(Spalten) Kompatibilitätsprobleme

(Flex) muss eine feste Höhe zugewiesen werden, die die festgelegte Spalte überschreitet und die festgelegte Spalte nicht ausfüllt.
• Schema

SpaltenflexScreenshotSpaltenschema wird natürlich unterstützt, Sie müssen es nur festlegen es zum übergeordneten Element Nur columns: 4; columns-gap: 6px; .

Flex-Lösung

columns: 4; column-gap: 6px; 。

flex 方案

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.

Absolut, KanalhöhenberechnungsschemaZuverlässiges Schema

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)
*/

absolute 计算高度方案

因为普通的布局已经无法满足我们的需求，所以我们可以考虑通过 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+ &#39;px&#39;;
        // 计算之后的 left 距离
        item.left = colIndex * (this.itemWidth + 10) + &#39;px&#39;

        // 累加操作
        arr[colIndex].list.push(item);
        arr[colIndex].height += item.height + 10;
    })
    return arr
},

通过计算，我们可以到，瀑布流布局下每个元素的位置，通过绝对定位就可以实现。

根据下标，来渲染到不同的通道 idx % 4

因为上个方案用到了绝对定位，那么有没有不用绝对定位的方案呢？回到我们的问题点上 定宽，不定高，那我们完全可以通过分开渲染放弃 absolute 来实现。

jsGroupList(){
    return this.list.reduce((s,n,idx)=>{
        // 根据下标，直接分配所属列
        s[idx % 4].push({idx: idx, item: n})
        return s
    }, [[],[],[],[],])
},

看开头是实现类似的功能的，但是有一个弊端（快来评论区回复呀）。

通过高度计算，然后分通道，避免 absolute

因为上一个方案是按下标分类的，其实瀑布流是按高度分类的，所以我们分类条件换成最低的列。

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!