Puisqu'il n'y a pas de serveur, j'utilise une chaîne JSON comme source du chargement des données d'image lors de la baisse
HTML:
<! Doctype html> <html> <éadf> <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 #main; } .pin {padding: 15px 0 0 15px; flottant: à gauche; } .box {padding: 10px; Border: 1px solide #ccc; Box-Shadow: 0 0 6px #ccc; Border-Radius: 5px; } .box img {width: 162px; Hauteur: Auto; } </ style> </ head> <body> <div id = "main"> <div> <div> <img src = "./ images / 1.jpg" /> </ div> </ div> <div> <img src = "./ images / 2.jpg" /> </ div> </ div> <v> <img src = "./ images / 3.jpg" /> <ir> <img src = "./ Images / 3.jpg" /> </ div> <img src = "./ Images / 3.jpg" /> </ div> <img src = "./ Images / 3.jpg" /> </ Div> <img Src = ". <img src = "./ images / 4.jpg" /> </ div> </ div> <div> <img src = "./ images / 4.jpg" /> </ div> </ div> <v> <img src = "./ images / 5.jpg" /> </ div> </ div> <v> <img src = "./ images / 6.jpg" /> </ div> <iMg src = ". <div> <img src = "./ images / 7.jpg" /> </ div> </ div> <div> <img src = "./ images / 8.jpg" /> </ div> </ div> <v> <img src = "./ images / 9.jpg" /> </v> </ div> <div> <img src = "./ not / n 9. / </div> <div> <img src = "./ images / 10.jpg" /> </ div> </ div> <v> <img src = "./ images / 10.jpg" /> </ div> </ div> <v> <img src = "./ images / 10.jpg" /> </v> </div> <v> <img src = ".. </div> </ div> <div> <img src = "./ images / 10.jpg" /> </div> </ div> <div> <img src = "./ images / 11.jpg" /> </ div> </ div> <div> <img src = "./ images / 12.jpg" /> </div> </div> <div> <img " src = "./ images / 12.jpg" /> </ div> </ div> <div> <img src = "./ images / 13.jpg" /> </ div> </ div> <v> <img src = "./ images / 14.jpg" /> </ div> </ div> <v> <img src = ". <div> <img src = "./ images / 16.jpg" /> </ div> </ div> <div> <img src = "./ images / 16.jpg" /> </ div> <v> <v> <img src = "./ images / 14.jpg" /> </v> </v> <div> <img src = ". </div> </ div> <div> <img src = "./ images / 16.jpg" /> </ div> </ div> <div> <img src = "./ images / 17.jpg" /> </ div> </ div> <v> <img src = "./ images / 18.jpg" /> </v> </ving src = "./ images / 18.jpg" /> </ div> </ div> <div> <img src = "./ images / 19.jpg" /> </ div> </ div> <v> <img src = "./ images / 20.jpg" /> </ div> </v> <v> <img src = ". </div> </div> </ body> </html>Jswallper.js:
window.onLoad = function () {waterfall ('main', 'bro'); var dataint = {'data': [{'src': '1.jpg'}, {'src': '2.jpg'}, {'src': '3.jpg'}, {'src': '4.jpg'}]}; window.onscroll = function () {if (checkscrollside ()) {var oparent = document.getElementById ('main'); // objet parent pour (var i = 0; i <dataint.data.length; i ++) {var opin = document.CreateElement ('div'); // Ajouter un nœud d'élément opin.classname = 'pin'; // ajouter l'attribut de nom de classe oparent.appendChild (opin); // Ajouter un nœud enfant var obox = document.CreateElement ('div'); obox.classname = 'box'; Opin.ApendChild (Obox); var oimg = document.CreateElement ('img'); oimg.src = '. / images /' + dataint.data [i] .src; obox.ApendChild (OIMG); } cascade ('main', 'bro'); }; }} / * Parent Parent ID PIN Element ID * / Fonction Waterfall (parent, broche) {var oparent = document.getElementById (parent); // objet parent var apin = getClassObj (Oparent, Pin); // Obtenez le tableau de la zone de blocage de stockage APIN APIN VAR IPINW = APIN [0]. num = math.floor (document.DocumentElement.ClientWidth / ipinw); // le nombre d'épingles qui peuvent être hébergées dans chaque ligne [largeur de fenêtre divisée par une largeur de boîte de bloc] Oparent.style.csstext = 'width:' + ipinw * num + 'px; marge: 0 auto; '; // définir le style de centrage parent: largeur fixe + marge horizontale automatique var Pinharr = []; // utilisé pour stocker les hauteurs de toutes les boîtes de blocs dans chaque colonne. a for (var i = 0; i <apin.length; i ++) {// transférer chaque élément de boîte de bloc du tableau apin var pinh = apin [i] .offsetheight; if (i <num) {pinharr [i] = pinh; // La broche de la boîte de blocs NUM dans la première ligne est ajoutée au tableau pinharr} else {var minh = math.min.apply (null, pinharr); // la valeur minimale dans le tableau pinharr Minh var Minhindex = getminhindex (pinharr, mineh); apin [i] .style.position = 'absolue'; // définit le déplacement absolu apin [i] .style.top = Minh + 'px'; apin [i] .style.left = apin [minhindex] .offsetleft + 'px'; // La hauteur de l'élément élevé minimum du tableau + Ajouter APIN [i] Block Box Height Pinharr [Minhindex] + = APIN [i] .offsetheight; // Mettez à jour la hauteur de la colonne après avoir ajouté la boîte de bloc}}} / * * Obtenez la table obj = parent.getElementsByTagName ('*'); // Obtenez tous les sous-ensembles de Parent var Pins = []; // Créer un tableau pour collecter des éléments enfants pour (var i = 0; i <obj.length; i ++) {// transf les éléments enfants, juger la catégorie, et appuyez sur le tableau if (obj [i] .classname == classe) { pins.push (obj [i]); }}; return broches;} / **** * Obtenez l'index de l'index de hauteur de broche minimale * / fonction getminhindex (arr, minh) {for (var i in arr) {if (arr [i] == Minh) {return i; }}} Fonction Checkscrollside () {var oparent = document.getElementById ('main'); var apin = getClassObj (oparent, 'bro'); var lastpinh = apin [apin.length-1] .offsettop + math.floor (apin [apin.length-1] .offsetheight / 2); // créer la hauteur de [déclenchant la fonction de fonction de la boîte de bloc (): le dernier boîtier de blocs est de la fin de la page Web + la moitié de sa hauteur (l'implémentation commence le chargement sans roulement à la fin) ScrollTop = Document.DocumentElement.ScrollTop || Document.Body.ScrollTop; // Paper Height Return (LastPinH <ScrollTop + DocumentH)? True: FALSE; // Retour True après avoir atteint la hauteur spécifiée, déclenchant la fonction Waterfall ()}Diagramme de démonstration:
Télécharger le code source: //www.vevb.com/jiaoben/452663.html
Adresse de démonstration: http://demo.vevb.com/js/2016/jswallper/