JS realisiert den Effekt des Bildwasserfallflusses

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

Artikel empfehlen

Beispielcode zur Implementierung einer Pivot-Tabelle in MySQL/MariaDB

Im vorherigen Artikel wurden mehrere Methoden zur...

So installieren Sie Tomcat8 im Docker

1. Installieren Sie Tomcat8 mit Docker 1. Suchen ...

Detaillierte Analyse des MySQL 8.0-Speicherverbrauchs

Inhaltsverzeichnis 1. innodb_buffer_pool_size 2. ...

MySQL verwendet inet_aton und inet_ntoa, um IP-Adressdaten zu verarbeiten

Dieser Artikel stellt vor, wie Sie IP-Adressdaten...

MySQL-Gruppierungsmethode für die Gruppierungssequenz einzelner Wörter und die Gruppierung mehrerer Felder

Ich habe hier eine Warentabelle erstellt. Schauen...

Vue verwendet el-tree Lazy Loading, um die Funktionen Hinzufügen, Löschen, Ändern und Abfragen zu implementieren.

Über die Baumdarstellung von Vue wird im Projekt ...

Zwei einfache Beispiele für Menünavigationsleisten

Menüleiste Beispiel 1: Code kopieren Der Code lau...

Eine kurze Erläuterung der ifnull()-Funktion ähnlich der nvl()-Funktion in MySQL

IFNULL(Ausdruck1,Ausdruck2) Wenn expr1 nicht NULL...

jQuery implementiert das Klicken auf die linke und rechte Schaltfläche zum Wechseln von Bildern

In diesem Artikelbeispiel wird der spezifische Co...

Detaillierte Erläuterung der Methode zur Optimierung der MySQL-Datenbanktabellenstruktur

Dieser Artikel veranschaulicht anhand eines Beisp...

Detaillierte Erklärung der MySQL-Berechtigungssteuerung

Inhaltsverzeichnis MySQL-Berechtigungskontrolle B...

Webdesign-Kenntnisse: Problem der adaptiven Höhe von Iframes

Manche Leute sind vielleicht noch nicht auf dieses...

Vue implementiert die Bottom-Query-Funktion

In diesem Artikelbeispiel wird der spezifische Co...

Detaillierte Erläuterung des JavaScript-Betriebsmechanismus und eine kurze Diskussion über Event Loop

Inhaltsverzeichnis 1. Warum ist JavaScript Single...

Lösung für den MySQL-Root-Passwortfehler Nummer 1045

MySQL-Dienst stoppen Klicken Sie in Windows mit d...