Drei Möglichkeiten zur Implementierung des Wasserfall-Flow-Layouts

Drei Möglichkeiten zur Implementierung des Wasserfall-Flow-Layouts

Vorwort

Als ich heute Xianyu durchsuchte, fiel mir auf, dass die Höhe jeder Zeile nicht gleich war. Als ich davon erfuhr, wurde mir klar, dass es sich um ein Wasserfall-Flow-Layout handelte. Es fand es sehr interessant, also beschloss ich, es zu studieren und fand im Internet einige Lösungen. Es gibt ungefähr drei Möglichkeiten, einen Wasserfall-Flow zu implementieren.

1. JS realisiert Wasserfallfluss

Gedankenanalyse

  • Das Wasserfall-Flusslayout ist durch gleiche Breite und ungleiche Höhe gekennzeichnet.
  • Um die Lücke in der letzten Reihe zu minimieren, müssen Sie, beginnend ab der zweiten Reihe, das Bild unter dem kürzesten Bild in der ersten Reihe platzieren und so weiter.
  • Das übergeordnete Element ist auf relative Positionierung eingestellt und das Element, das das Bild enthält, auf absolute Positionierung. Jedes Element wird dann durch Festlegen der oberen und linken Werte positioniert.

Code-Implementierung

<!DOCTYPE html>
<html>
<Kopf>
    <Stil>
        .Kasten {
            Breite: 100 %;
            Position: relativ;
        }
        .Artikel {
            Position: absolut;
        }
        .item img{
            Breite: 100 %;
            Höhe: 100 %;
        }
    </Stil>
</Kopf>
<Text>
<div Klasse="Box">
    <div Klasse="Artikel">
        <img src="banner.jpg" alt="" />
    </div>
    <div Klasse="Artikel">
        <img src="anzeigen.jpg" alt="" />
    </div>
    <div Klasse="Artikel">
        <img src="cloth.jpg" alt="" />
    </div>
    <div Klasse="Artikel">
        <img src="banner.jpg" alt="" />
    </div>
    <div Klasse="Artikel">
        <img src="anzeigen.jpg" alt="" />
    </div>
    <div Klasse="Artikel">
        <img src="cloth.jpg" alt="" />
    </div>
    <div Klasse="Artikel">
        <img src="banner.jpg" alt="" />
    </div>
    <div Klasse="Artikel">
        <img src="anzeigen.jpg" alt="" />
    </div>
    <div Klasse="Artikel">
        <img src="cloth.jpg" alt="" />
    </div>
    <div Klasse="Artikel">
        <img src="anzeigen.jpg" alt="" />
    </div>
    <div Klasse="Artikel">
        <img src="cloth.jpg" alt="" />
    </div>
    <div Klasse="Artikel">
        <img src="banner.jpg" alt="" />
    </div>
</div>
</body>
<script src="jquery.min.js"></script>
<Skript>
    Funktion Wasserfall() {
        // 1 Bestimmen Sie die Breite des Bildes – Breite der Bildlaufleiste var pageWidth = getClient().width-8;
        var columns = 3; //3 Spalten var itemWidth = parseInt(pageWidth/columns); //Breite des Elements abrufen $(".item").width(itemWidth); //Auf die Breite des Elements einstellen var arr = [];
        $(".box .item").jeweils(Funktion(i){
            var Höhe = $(this).find("img").height();
            if (i < Spalten) {
                // 2 Die erste Zeile ist in der Reihenfolge$(this).css({
                    oben: 0,
                    links:(Elementbreite) * i+20*i,
                });
                //Zeilenhöhe in das Array einfügen arr.push(height);
            } anders {
                // Andere Zeilen // 3 Finde die minimale Höhe und ihren Index im Array var minHeight = arr[0];
                Var-Index = 0;
                für (var j = 0; j < arr.length; j++) {
                    wenn (minHeight > arr[j]) {
                        minHöhe = arr[j];
                        Index = j;
                    }
                }
                // 4 Setze die erste Boxposition der nächsten Zeile // Der obere Wert ist die Höhe der kleinsten Spalte $(this).css({
                    top:arr[index]+30, //Setze den Abstand auf 30 left:$(".box .item").eq(index).css("left")
                });

                // 5 Ändere die Höhe der Mindestspalte // Die Höhe der Mindestspalte = die aktuelle Höhe + die Höhe der gespleißten Spalte arr[index] = arr[index] + height+30; // Stelle einen Abstand von 30 ein}
        });
    }
    //clientWidth verarbeitet die Kompatibilitätsfunktion getClient() {
        zurückkehren {
            Breite: Fenster.innereBreite || Dokument.Dokumentelement.Clientbreite || Dokument.Body.Clientbreite,
            Höhe: Fenster.innereHöhe || Dokument.Dokumentelement.Clienthöhe || Dokument.Körper.Clienthöhe
        }
    }
    // Wird in Echtzeit ausgelöst, wenn sich die Seitengröße ändert window.onresize = function() {
        //Definieren Sie den Wasserfallfluss neuwaterFall();
    };
    // Window.onload = function(){ initialisieren
        //Wasserfallfluss realisierenwaterFall();
    }
</Skript>
</html>

Die Wirkung ist wie folgt

2. Mehrzeiliges Spaltenlayout, um einen Wasserfallfluss zu erreichen

Gedankenanalyse:

  • Um einen Wasserfallfluss zu implementieren, verlässt sich Column hauptsächlich auf zwei Eigenschaften.
  • Eines ist das Spaltenanzahlattribut, das angibt, in wie viele Spalten es unterteilt ist.
  • Eine davon ist die Column-Gap-Eigenschaft, die den Abstand zwischen den Spalten festlegt.

Code-Implementierung:

<!DOCTYPE html>
<html>
<Kopf>
    <Stil>
        .Kasten {
            Rand: 10px;
            Spaltenanzahl: 3;
            Spaltenabstand: 10px;
        }
        .Artikel {
            Rand unten: 10px;
        }
        .item img{
            Breite: 100 %;
            Höhe: 100 %;
        }
    </Stil>
</Kopf>
<Text>
<div Klasse="Box">
    <div Klasse="Artikel">
        <img src="banner.jpg" alt="" />
    </div>
    <div Klasse="Artikel">
        <img src="anzeigen.jpg" alt="" />
    </div>
    <div Klasse="Artikel">
        <img src="cloth.jpg" alt="" />
    </div>
    <div Klasse="Artikel">
        <img src="banner.jpg" alt="" />
    </div>
    <div Klasse="Artikel">
        <img src="anzeigen.jpg" alt="" />
    </div>
    <div Klasse="Artikel">
        <img src="cloth.jpg" alt="" />
    </div>
    <div Klasse="Artikel">
        <img src="banner.jpg" alt="" />
    </div>
    <div Klasse="Artikel">
        <img src="anzeigen.jpg" alt="" />
    </div>
    <div Klasse="Artikel">
        <img src="cloth.jpg" alt="" />
    </div>
    <div Klasse="Artikel">
        <img src="anzeigen.jpg" alt="" />
    </div>
    <div Klasse="Artikel">
        <img src="cloth.jpg" alt="" />
    </div>
    <div Klasse="Artikel">
        <img src="banner.jpg" alt="" />
    </div>
</div>
</body>

Die Wirkung ist wie folgt:

3. Flexibles Layout, um einen Wasserfallfluss zu erreichen

Gedankenanalyse:

Um einen Wasserfallfluss mit Flex zu erreichen, muss das äußerste Element auf „display: flex“ eingestellt werden, also auf horizontale Anordnung. Legen Sie dann „Flex-Flow: Column Wrap“ fest, um die Spalten zu umbrechen. Stellen Sie die Höhe auf 100 vh ein, um die gesamte Bildschirmhöhe auszufüllen und Platz für untergeordnete Elemente zu schaffen. Die Breite jeder Spalte kann mit der Funktion „Calc“ festgelegt werden, z. B. Breite: „calc(100 %/3 – 20 px)“. In 3 Spalten gleicher Breite abzüglich der linken und rechten Ränder aufteilen.

Code-Implementierung:

<!DOCTYPE html>
<html>
<Kopf>
    <Stil>
        .Kasten {
          Anzeige: Flex;  
          Flex-Flow: Spaltenumbruch;
          Höhe: 100vh;
        }
        .Artikel {
            Rand: 10px;
            Breite: berechnet (100 %/3 – 20 Pixel);
        }
        .item img{
            Breite: 100 %;
            Höhe: 100 %;
        }
    </Stil>
</Kopf>
<Text>
<div Klasse="Box">
    <div Klasse="Artikel">
        <img src="banner.jpg" alt="" />
    </div>
    <div Klasse="Artikel">
        <img src="anzeigen.jpg" alt="" />
    </div>
    <div Klasse="Artikel">
        <img src="cloth.jpg" alt="" />
    </div>
    <div Klasse="Artikel">
        <img src="banner.jpg" alt="" />
    </div>
    <div Klasse="Artikel">
        <img src="anzeigen.jpg" alt="" />
    </div>
    <div Klasse="Artikel">
        <img src="cloth.jpg" alt="" />
    </div>
    <div Klasse="Artikel">
        <img src="banner.jpg" alt="" />
    </div>
    <div Klasse="Artikel">
        <img src="anzeigen.jpg" alt="" />
    </div>
    <div Klasse="Artikel">
        <img src="cloth.jpg" alt="" />
    </div>
    <div Klasse="Artikel">
        <img src="anzeigen.jpg" alt="" />
    </div>
    <div Klasse="Artikel">
        <img src="cloth.jpg" alt="" />
    </div>
    <div Klasse="Artikel">
        <img src="banner.jpg" alt="" />
    </div>
</div>
</body>

Die Wirkung ist wie folgt:

4. Vergleich von 3 Methoden

Wenn es sich nur um eine einfache Seitenanzeige handelt, können Sie das mehrspaltige Layout und das flexible Flex-Layout verwenden. Wenn Sie Daten dynamisch hinzufügen oder die Anzahl der Spalten dynamisch festlegen müssen, müssen Sie JS + jQuery verwenden.

Oben sind drei vom Editor vorgestellte Möglichkeiten zur Implementierung des Wasserfall-Flow-Layouts. Ich hoffe, es wird für alle hilfreich sein. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!

Das könnte Sie auch interessieren:
  • So verwenden Sie JS zum Implementieren des Wasserfalllayouts von Webseiten
  • js, um ein Wasserfall-Flusslayout zu erreichen (unendliches Laden)
  • So implementieren Sie das Wasserfalllayout mit einer Zeile JavaScript-Code
  • Implementierung des JS-Wasserfall-Flow-Layouts
  • Implementierung eines Wasserfall-Flow-Layouts basierend auf JavaScript

<<:  MySQL-Implementierung für pessimistisches und optimistisches Sperren

>>:  Einfache Implementierung zum Ausblenden der Bildlaufleiste in HTML

Artikel empfehlen

Vue verwendet Monaco, um Codehervorhebung zu erreichen

Mithilfe der Vue-Sprache und Elementkomponenten m...

So überwachen und löschen Sie abgelaufene Sitzungen in Tomcat

Vorwort Ich habe zufällig entdeckt, dass die halb...

Einführung in die drei wesentlichen Protokolle für MySQL-Datenbankinterviews

Inhaltsverzeichnis 1. Redo-Log (Transaktionsproto...

So erstellen Sie https mit Nginx und dem kostenlosen Tencent Cloud-Zertifikat

Ich habe gelernt, wie man https bekommt. Kürzlich...

Diagramm des Datenübertragungsprozesses beim dritten TCP-Handshake

Die Prozesspakete mit dem SYN-Flag im RFC793-Doku...

Detaillierte Erläuterung der kombinierten MySQL-Indexmethode

Für jedes DBMS sind die Indizes der wichtigste Op...

Tutorial zur Installation und Konfiguration der Centos7-MySQL-Datenbank

1. Systemumgebung Die Systemversion nach dem Yum-...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.15

In diesem Artikel wird die Installations- und Kon...

Grundlegende Anweisungen der MySQL-Datendefinitionssprache DDL

MySQL DDL-Anweisungen Was ist DDL, DML. DDL ist e...

Die Lösung von html2canvas, dass Bilder nicht normal erfasst werden können

Frage Lassen Sie mich zunächst über das Problem s...

Beispiel für die Verwendung von CSS3 zum Anpassen des Stils eines Eingabe-Mehrfachauswahlfelds

Prinzip: Blenden Sie zuerst das Eingabeelement au...

So kompilieren und installieren Sie PHP und Nginx in einer Ubuntu-Umgebung

Dieser Artikel beschreibt, wie man PHP und Nginx ...

So kapseln Sie Axios in Vue

Inhaltsverzeichnis 1. Installation 1. Einleitung ...

Verwenden Sie .Htaccess, um böswillige IP-Angriffe auf Websites zu verhindern, den Zugriff auf bestimmte Domänennamen zu untersagen, Maschinencrawler zu untersagen und Hotlinking zu untersagen

Vor einigen Tagen habe ich festgestellt, dass mei...

Eine kurze Diskussion zum Erstellen eines Clusters in nodejs

Inhaltsverzeichnis Cluster-Cluster Clusterdetails...