JS realisiert den Effekt des Bildwasserfallflusses

In diesem Artikel wird der spezifische JS-Code zur Realisierung des Bildwasserfallflusses zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Verfahren:

1. Erstellen Sie ein Bigblock-Modul, um alle Bilder zu speichern.
2. Holen Sie sich dieses große Modul und fügen Sie einen Unterelementblock hinzu, um das kleine Bild aufzunehmen.
3. Kapseln Sie eine Funktion list(n) ein, um 50 Bilder zu speichern, und hängen Sie jedes Bild an das leere Array ele[] an.
4. Kapseln Sie eine Funktion set_position() ein, um die Position jedes Bildes zu bestimmen, indem Sie Attribute wie offsetHeight, offsetTop, offsetWidth verwenden, und legen Sie eine dynamische Höhe für den größten Block fest. Mit zunehmender Anzahl geladener Bilder nimmt auch die Höhe des größten Blocks zu.
5. Verwenden Sie das Ereignis window.onload, um Bilder bequemer zu laden.
6. Fügen Sie der Bildlaufleiste des Browsers ein Ereignis hinzu. Wenn die Bildlaufleiste 10 Pixel über den unteren sichtbaren Bereich des Hauptteils hinaus gleitet, werden 30 neue Bilder geladen. Die Bildlaufleiste bleibt jedes Mal an der Position des gerade geladenen Bilds.

<!DOCTYPE html>
<html>
<head lang="de">
    <meta charset="UTF-8">
    <title>Foto Wasserfall</title>
    <Stil>
        *{
            Rand: 0;
            Polsterung: 0;
        }
        Körper{
           /* Hintergrund: #ebebeb;*/
            Hintergrund: URL (./img/bging2.jpg);
            Hintergrundgröße: 100 %;
            Höhe: 100 %;
        }
        .großer Block {
            Position: relativ;
            Breite: 650px;
            Mindesthöhe: 200px;
            Hintergrund: #fff;
            Rand: automatisch;

        }
        .smallblock{
            Position: absolut;
            Breite: 100px;
            Rahmenradius: 5px;
            Kastenschatten: 0 0 7px #89c8eb;
            Box-Größe: Rahmenbox;
            Überlauf: versteckt;
        }
        .Foto{
            Breite: 100 %;
            vertikale Ausrichtung: Mitte;
        }
    </Stil>
</Kopf>
<Text>
<div Klasse="großer Block">

</div>
<Skript>
    var Big = document.getElementsByClassName ("bigblock")[0];
    var ele=[];
    Variable Nummer = 6;
    var bghight=0;
    var start=0;
    var image_img=["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "9.jpg", "10.jpg","11.jpg","12.jpg","13.jpg","14.jpg","15.jpg","16.jpg","17.jpg"];
    für(var i=0;i<50;i++){
        Liste();

    }
  Funktionsliste(n){
      var small = document.createElement("div");
      var Bild = Dokument.createElement("img");
      klein.Klassenname="kleinerBlock";
      image.className="Foto";
      image.src="./img/"+image_img[parseInt(Math.random()* image_img.length)]; //0-12
      ele.push(klein);
      Groß.anhängenKind(klein);
      small.appendChild (Bild);

  }
   Funktion set_position(){
     für(var i=Start;i<ele.length;i++){
       //Position jedes Bildes festlegen var settop=i <num ? 0: ele[i-num].offsetHeight +10 + ele[i-num].offsetTop;
       ele[i].style.top=settop+"px";
       var setleft = i %num * ele[i].offsetWidth + (i %num) * 10;
       ele[i].style.left=setleft+"px";
         //Hintergrundhöhe abrufen bghight =(ele[i].offsetHeight +ele[i].offsetTop)>bghight ? ele[i].offsetHeight +ele[i].offsetTop :bghight ;
       Big.style.height = Breite + "px";
     }
   }

   fenster.onload = funktion(){
       set_position();
       //Füge das Scrollleisten-Ereignis des Browsers hinzu this.addEventListener ("scroll", function() {
          var b_height=Dokument.Body.ClientHeight;
           wenn(parseInt (this.pageYOffset + this.innerHeight ) > b_height - 10 ){
              Start = Elementlänge;
              für(i=0;i<30;i++){
                   Liste();
              }
               setze_position();
           }
          // console.log(b_height); //Die sichtbare Höhe des Textkörpers, variabel // console.log(this.pageYOffset); //Der obere Versatz der Bildlaufleiste // console.log(this.innerHeight); //Die Höhe des sichtbaren Bereichs des Browsers})
   }
</Skript>
</body>
</html>

Bei dem Bild handelt es sich nicht um ein dynamisches Bild, daher ist kein Effekt erkennbar, der Code ist aber korrekt, Sie können es ja mal versuchen.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

Verwenden von js, um einen Wasserfalleffekt zu erzielen
js realisiert das dynamische Laden von Daten durch Wasserfallfluss
So verwenden Sie JS zum Implementieren des Wasserfalllayouts von Webseiten
js, um ein Wasserfall-Flusslayout zu erreichen (unendliches Laden)
3 Möglichkeiten zum Implementieren eines Wasserfalllayouts mit JavaScript
Haben Sie gelernt, wie man einen JavaScript-Wasserfallfluss implementiert?

<<: Einstellen der Engine MyISAM/InnoDB beim Erstellen einer Datentabelle in MySQL

>>: js zur Realisierung der Web-Message-Board-Funktion

Das WeChat-Applet implementiert feste Header- und Listentabellenkomponenten

Detaillierte Erläuterung des Falls, in dem eine untergeordnete Vue-Komponente die Methode der übergeordneten Komponente aufruft

1. Rufen Sie die Methode der übergeordneten Kompo...

JS realisiert den Effekt des Bildwasserfallflusses

Das WeChat-Applet implementiert feste Header- und Listentabellenkomponenten

Detaillierte Erläuterung der Lösung für das Problem der automatischen Trennung der xshell-Remoteverbindung

Lösung für den nicht funktionierenden Aufruf this.$notify.close() von ElementUI

Lösung für das HTML-Kodierungsproblem in IE6, das zu JS-Fehlern und nicht angewendetem CSS führt

Detaillierte Erläuterung der Implementierungsmethode und Verwendung von abgerundeten Ecken mit CSS3-Randradius

Implementierung eines einfachen Chatroom-Dialogs basierend auf WebSocket

jQuery realisiert den Scroll-Effekt von Tabellenzeilendaten

Einführung in die Verwendung von Requisiten in Vue

Besprechen Sie den Entwicklungstrend der Baidu Encyclopedia UI

Lösung für vergessenes Linux MySQL-Root-Passwort

Artikel empfehlen

So konfigurieren Sie MGR Single Master und mehrere Slaves in MySQL 8.0.15

Auf den Alibaba Cloud Server Tomcat kann nicht zugegriffen werden

HTML+CSS zum Erstellen von Herzschlag-Spezialeffekten

Eine kurze Analyse der Verwendung von Rahmen- und Anzeigeattributen in CSS

So passen Sie einen EventEmitter in node.js an

HTML+CSS lässt Div-Tags Löschsymbole in der oberen rechten Ecke hinzufügen. Beispielcode

js, um Drag & Drop-Sortierdetails zu erreichen

Nginx-Konfigurationsvorgang für den externen Netzwerkzugriff auf die Intranet-Site

Vor- und Nachteile des Tabellenlayouts und warum es nicht empfohlen wird

Analyse und Lösung der Gründe für Links- und Rechtssprünge beim Laden von Webseiten

Detaillierte Erläuterung des Falls, in dem eine untergeordnete Vue-Komponente die Methode der übergeordneten Komponente aufruft

Nexus verwendet Nginx-Proxy zur Unterstützung des HTTPS-Protokolls

Docker-Installation Nginx Tutorial Implementierung Abbildung

Detaillierte Erläuterung der MySQL-Replikationsprinzipien und praktischen Anwendungen

So implementieren Sie die Paging-Funktion des MyBatis-Interceptors