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

Ein Artikel zum schnellen Verständnis des Lebenszyklus und der Hook-Funktionen von Angular und Ionic

Inhaltsverzeichnis Eckig erreichen Aufrufreihenfo...

Implementierung der Validierung mehrerer Elemente im Formular

Im Projekt werden häufig Formulartests durchgefüh...

Detaillierte Erläuterung des Mechanismus und der Implementierung der Accept-Sperre in Nginx

Vorwort nginx verwendet ein Multiprozessmodell. W...

Lassen Sie uns ausführlich über das Prinzip und die Implementierung von new in JS sprechen

Inhaltsverzeichnis Definition Konstruktorkörper s...

MySQL Master-Slave-Replikationsprinzip und zu beachtende Punkte

Vorne geschrieben Ich habe kürzlich ein spezielle...

Lösung für das Problem, dass MySQL im Windows-System kein Chinesisch eingeben und anzeigen kann

Schritt 1: Öffnen Sie mit dem Editor die Datei „m...

mysql installer community 8.0.16.0 Installations- und Konfigurations-Grafik-Tutorial

Grafisches Installationstutorial für die MySQL In...

Automatischer Commit-Vorgang für MySQL-Transaktionen

Der Standardbetriebsmodus von MySQL ist der Autoc...

Detaillierte Erläuterung des Prinzips der Vue-Überwachungsdaten

Inhaltsverzeichnis 1. Einleitung II. Überwachungs...

So lösen Sie das Problem der langsamen Geschwindigkeit von MySQL wie bei Fuzzy-Abfragen

Frage: Warum ist die Like-Fuzzy-Abfrage immer noc...

Vue implementiert ein einfaches Einkaufswagenbeispiel

In diesem Artikel wird der spezifische Code von V...

Erläuterung des Problems bei der Auswahl des MySQL-Speicherzeittyps

Der datetime-Typ wird normalerweise zum Speichern...

Erhalten Sie schnell Datenbankverbindungsinformationen und einige Erweiterungen über Zabbix

Hintergrund Da die Anzahl der Anwendungssysteme w...

Fallstudie zu JavaScript Anti-Shake

Prinzip Das Prinzip von Anti-Shake ist: Du kannst...

So installieren Sie Docker auf Raspberry Pi

Da Raspberry Pi auf der ARM-Architektur basiert, ...