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

So entfernen Sie die Kopfzeile aus der Elementtabelle

Dokumenthinweise mit dem Attribut show-header <...

Das WeChat-Applet implementiert das Scrollen von Text

In diesem Artikelbeispiel wird der spezifische Co...

So verwenden Sie Docker Compose zum Erstellen eines FastDFS-Dateiservers

Im vorherigen Artikel wurde ein ausführliches Bei...

So führen Sie Linux-Shell-Befehle in Docker aus

Um einen Shell-Befehl in Docker auszuführen, müss...

...

Schritte zum Einrichten des Windows Server 2016 AD-Servers (Bild und Text)

Einführung: AD ist die Abkürzung für Active Direc...

Benutzerdefinierte Komponente der unteren Navigationsleiste des WeChat-Applets

In diesem Artikelbeispiel wird der spezifische Im...

Node+Socket realisiert einfache Chatroom-Funktion

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

Erkunden Sie die gängigen VMware ESXI CLI-Befehle

Inhaltsverzeichnis 【Allgemeine Befehle】 [Zusammen...

CSS entfernt den gepunkteten Rahmen, der beim Klicken auf einen Link entsteht. Kompatibel mit Browsern, die den W3C-Standards entsprechen

Teil des Codes: Code kopieren Der Code lautet wie...

Tabellen dynamisch in HTML hinzufügen_PowerNode Java Academy

Ohne weitere Umschweife werde ich den Code direkt...

Beschreibung der Schreibmethode des Foreach-Arrays in Vue und des Traversal-Arrays in js

So schreiben Sie ein Vue-foreach-Array und durchl...

Navicat für MySQL 11 Registrierungscode\Aktivierungscode-Zusammenfassung

Lesetipp: Navicat12.1 Serie Cracking und Aktivier...

Beispiele für die Verwendung von HTML-Marquee-Tags

Dieses Tag ist nicht Teil von HTML3.2 und unterstü...

Perfekte Lösung für das Problem, dass Navicat nach der Installation von MySQL im Docker keine Verbindung herstellen kann

1. Docker zieht das Image Docker Pull MySQL (stan...