Da es keinen Server gibt
HTML:
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><script src="js/waterfall.js"></script><style type="text/css"> *{padding: 0;margin:0;} #main{ position: relative; } .pin {padding: 15px 0 0 15px; float: links; } .box {padding: 10px; Grenze: 1PX Solid #CCC; Box-Shadow: 0 0 6px #CCC; Border-Radius: 5px; } .box img {width: 162px; Höhe: Auto; } </style> </head> <body> <div id = "main"> <div> <img src = "./ Bilder/1.JPG"/> </div> </div> <div> <img src = "./ Images/2.jpg"/> </div> </div> <img Src =. <img src = "./ Images/4.jpg"/> </div> </div> <div> <img src = "./ Images/4.JPG"/> </div> </div> <div> <img src = "./ Images/5.jpg"/> </> </div> </div> </iMg Src =. <div> <img src="./images/7.jpg"/> </div> </div> <div> <img src="./images/8.jpg"/> </div> </div> <div> <img src="./images/9.jpg"/> </div> </div> <div> <img src="./images/9.jpg"/> </div> </div> <div> <img src="./images/10.jpg"/> </div> </div> <div> <img src="./images/10.jpg"/> </div> </div> <div> <img src="./images/10.jpg"/> </div> </div> <div> <img src="./images/10.jpg"/> </div> </div> <div> <img src = "./ Images/10.jpg"/> </div> </div> <div> <img src = "./ Images/11.jpg"/> </div> </div> <img src = "./ Images/12.jpg"/> </div> </div> <div> <img src = "./ Images/13.jpg"/> </div> </div> <div> <img src = "./ Images/14.jpg"/> </> </div> </div> </iMg Src = ". <div> <img src="./images/16.jpg"/> </div> </div> <div> <img src="./images/16.jpg"/> </div> </div> <div> <img src="./images/14.jpg"/> </div> </div> <div> <img src="./images/15.jpg"/> </div> </div> <div> <img src = "./ Images/16.jpg"/> </div> </div> <div> <img src = "./ Images/17.jpg"/> </div> </div> <img src = "./ Images/18.jpg"/> </div> </div> <div> <img src = "./ Images/19.jpg"/> </div> </div> <div> <img src = "./ Images/20.jpg"/> </> </div> </div> <img> <img Src = ". </div> </div> </body> </html>Jswallper.js:
window.onload = function () {waterfall ('main', 'pin'); var dataint = {'data': [{'src': '1.jpg'}, {'src': '2.jpg'}, {'src': '3.jpg'}, {'src': '4.jpg'}]}; window.onscroll = function () {if (poksCrollside ()) {var Oparent = document.getElementById ('main'); // übergeordnetes Objekt für (var i = 0; i <dataint.data.Length; i ++) {var opin = document.createelement ('div'); // Element Node Opin fügen.classname = 'Pin'; // Klassenname Attribut oparent.AppendChild (Opining) hinzufügen; // untergeordnetes Knoten var obox = document.createelement ('div'); obox.className = 'box'; Opin.AppendChild (Obox); var oimg = document.createelement ('img'); oimg.src = './Images/'+dataint.data [i] .src; Obox.AppendChild (OIMG); } Waterfall ('Main', 'Pin'); }; }}/* übergeordnete ID -Pin -Element -ID*/Funktion Wasserfall (übergeordnet, pin) {var oparent = document.getElementById (übergeordnet); // übergeordnete Objekt var apin = getClassObj (oparent, pin); // das Array der Speicherblock -Pin -APin var ipinw = apin [0]. num = math.floor (document.documentElement.clientwidth/ipinw); // Die Anzahl der Stifte, die in jeder Zeile aufgenommen werden können [Fensterbreite durch eine Blockbox -Breite] oparent.style.csSText = 'width:'+ipinw*num+'px; Rand: 0 Auto; '; // Setzen Sie den Eltern -Zentrierstil: Festbreite + Automatische horizontale Rand var pinharr = []; // Wird verwendet, um die Höhen aller Blockboxen in jeder Spalte zu speichern. a für (var i = 0; i <apin.length; i ++) {// Jedes Blockbox -Element des Array apin var pinh = apin [i] .Offseteight; if (i <num) {Pinharr [i] = Pinh; // Die Num -Block -Box -Pin in der ersten Zeile wird dem Array Pinharr} {var minh = math.min.apply (null, pinharr) hinzugefügt. apin [i] .Style.position = 'absolut'; // Setzen Sie das absolute Verschiebungs -Apin [i] .style.top = minh+'px'; apin [i] .Style.left = apin [minhindex] .offsetleft+'px'; // die Höhe des minimalen hohen Elements des Array + apin [i] Blockboxhöhe Pinharr [minhindex] + = apin [i] .offseteight; // Die Spaltenhöhe nach dem Hinzufügen des Blockboxs}}}/**das Array der gleichen untergeordneten Elemente des übergeordneten Klassens und der übergeordneten Elemente und der Unterschiede erhalten. obj = parent. pins.push (obj [i]); }}; Return Pins;}/*****Nehmen Sie den Index des Minimum -Pin -Höhen -Index*/Funktion getMinHIndex (arr, minh) {für (var i in arr) {if (arr [i] == minh) {return i; }}} function ChecksCrollside () {var oparent = document.getElementById ('main'); var apin = getClassObj (Oparent, 'Pin'); var lastpinh = apin [apin.length-1] .offsettop + math.floor (apin [apin.length-1] .offseteight/2); // Erstellen Sie die Höhe der Blockbox-Funktion Waterfall ()]: Die letzte Blockbox befindet sich von der oberen Seite der Webseite + Hälfte der Höhe (mit der Implementierung beginnt das Laden zu laden), ohne zu rollen), ohne das Laden) VARBEITEN) scrolltop = document.documentElement.scrolltop || document.body.scrolltop; // Papierhöhe Return (LastPinH <scrolltop+documentH)? TRUE: False; // Return True nach Erreichen der angegebenen Höhe, auslöst die Waterfall () -Funktion}}Demo -Diagramm:
Quellcode herunterladen: //www.vevb.com/jiaben/452663.html
Demo -Adresse: http://demo.vevb.com/js/2016/jswallper/