Cet article utilise un code JS pur pour écrire un effet de page Web de flux de cascade, implémentant initialement une disposition de débit de base en cascade et simuler les données AJAX chargeant une nouvelle fonction d'image après avoir fait défiler vers le bas.
défaut:
1. Le programme n'est pas réactif et ne peut pas ajuster la largeur de la page en temps réel;
2. Lorsque des images de données de simulation AJAX sont ajoutées au programme, toutes les images de la page entière sont repositionnées une fois.
3. Le programme attend que toutes les images soient chargées avant de lire la taille de l'image. En fait, ce n'est certainement pas possible.
4. Dans les projets réels, le programme d'arrière-plan doit donner la valeur de la taille de l'image et utiliser directement l'attribut de largeur de l'image dans le code JS.
Idées pour ce programme:
Structure HTML:
<body> <div id = "Container"> <div> <div> <img src = "img / 1.jpg" /> </ div> </ div> <div> <div> <img src = "img / 2.jpg" /> </div> </div> ... </ div> </ body>
1. Initialiser la disposition
1. Définissez #Container en position: relative;
2. Set. Box pour flotter: à gauche;
3. Positionnez toutes les images après le chargement de la page Web;
3.1 La largeur d'image est fixe. Calculez le nombre d'images qui peuvent être hébergées par chaque ligne de la page actuelle, et obtenez la largeur de #Container, puis définissez la page au centre;
3.2 Boucle à travers toutes les images, la disposition flottante par défaut des premières images de Num est la première ligne, et le tableau BoxHeightAr = [];
3.3 Une fois la première disposition de ligne terminée, organisez l'image suivante et mettez à jour BoxHeightarr []:
3.3.1 Placez l'image suivante sous l'image la plus courte de la première ligne (position: absolue), c'est-à-dire la colonne avec la plus petite hauteur de BoxHeightrAr [], et enregistrez la valeur d'index des numéros suivants: minindex;
3.3.2 Mettez à jour la plus petite valeur de BoxHeightAr [] (BoxHeightarr [minindex] + la hauteur de l'image actuelle);
3.4 Répétez le cycle 3.3 étapes jusqu'à ce que toutes les images soient organisées
2. Surveillance en temps réel de la hauteur de défilement, si les nouvelles données doivent être chargées
1. Une fois l'initialisation terminée, obtenez la hauteur de la dernière image du haut: LastContentHeight
2. Utilisez window.onscroll = function () {...}
La surveillance en temps réel de la hauteur de défilement de la page actuelle est: Scrolltop
La surveillance en temps réel de la hauteur actuelle de la fenêtre de la page est: PageHeight
3. Lorsque la page surveille: LastContentHeight <ScrollTop + PageHeight, utilisez Ajax pour obtenir les données JSON de l'image nouvellement ajoutée.
3. Ajouter un nouveau contenu en bas de la page
1. Utilisez d'abord une boucle pour créer un nouveau conteneur d'image, ajoutez-le en bas, puis écrivez les données d'image correspondantes telles que les chemins de données dans les données JSON au conteneur pour compléter l'ajout de l'image.
2. Une fois toutes les nouvelles images ajoutées, réexécutez l'opération d'initialisation de l'étape 1 pour toutes les images et dispositions de toute la page.
Dossier de projet:
index.html: partie pré-place des données de l'image
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <link rel = "stylesheet" type = "text / css" href = "css / style.css" /> <script src = "js / app.js"> </ script> <title> javascript waterallal Flow Flow </ title> id = "conteneur"> <div> <div> <img src = "img / 1.jpg" /> </ div> </ div> <v> <img src = "img / 2.jpg" /> </ div> </ div> <v> <img src = "img / 3.jpg" /> </ div> </v> <v> </ div> </ div> <v> <img src = "img / 4.jpg" /> </ div> </ div> <div> <img src = "img / 5.jpg" /> </ div> </ div> <v> <img src = "img / 5.jpg" /> </ div> </div> <v> <img src = "img / 6.jpg" </ div> </ div> <div> <img src = "img / 7.jpg" /> </ div> </ div> <div> <img src = "img / 8.jpg" /> </ div> </ div> <v> <img src = "img / 8.jpg" /> </ div> </div> <v> <img src = "IMG / 9. </div> </ div> <div> <img src = "img / 9.jpg" /> </ div> </ div> <div> <img src = "img / 9.jpg" /> </ div> </ div> <div> <v> <img src = "img / 10.jpg" /> </div> </ving src = "img / 1.jpg" /> </ div> </ div> <div> <img src = "img / 1.jpg" /> </ div> </ div> <v> <img src = "img / 2.jpg" /> </ div> </ div> <img src = "img / 3.jpg" src="img/4.jpg"/> </div> </div> <div> <img src="img/5.jpg"/> </div> </div> <div> <img src="img/5.jpg"/> </div> </div> <div> <img src="img/6.jpg"/> </div> </div> <div> <img src = "img / 6.jpg" /> </ div> </ div> <div> <img src = "img / 6.jpg" /> </ div> </ div> <div> <img src = "img / 6.jpg" /> </ div> <v> src="img/6.jpg"/> </div> </div> </div> <div> <div> <img src="img/7.jpg"/> </div> </div> <div> <img src="img/8.jpg"/> </div> </div> <div> <img src="img/8.jpg"/> </div> </div> <div> <img src="img/9.jpg"/> </div> </div> <div> <img src="img/10.jpg"/> </div> </div> <div> <img src="img/1.jpg"/> </div> </div> <div> <img src="img/1.jpg"/> </div> </div> <div> <img src="img/2.jpg"/> </div> </div> <div> <img src="img/3.jpg"/> </div> </div> <div> <img src="img/4.jpg"/> </div> </div> <div> <img src="img/4.jpg"/> </div> </div> <div> <img src="img/5.jpg"/> </div> </div> <div> <img src="img/5.jpg"/> </div> </div> <div> <img src="img/6.jpg"/> </div> </div> <div> <img src="img/7.jpg"/> </div> </div> <div> <img src = "img / 8.jpg" /> </ div> </ div> <div> <img src = "img / 8.jpg" /> </ div> </ div> <div> <img src = "img / 9.jpg" /> </ div> </ div> <iv> <iMg src = "img / 9.jpg" /> </ div> <iMg src = "img / 9.jpg" /> </ div> <iMg src = "img / 9.jpg" /> </ div> <iMg src = "IMG / 9.jpg" /> </v> <div> <img src = "img / 9.jpg" /> </ div> </ div> <div> <div> <img src = "img / 9.jpg" /> </ div> </ div> <v> <div> <img src = "img / 10.jpg" /> </v> </div> </div> </ div> </vrc>
style.css:
* {margin: 0; rembourrage: 0;} # conteneur {position: relative;}. Box {padding: 5px; float: Left;}. Box_img {padding: 5px; Border: 1px solide #ccc; Box-shadow: 0 0 5px #ccc; Border-Radius: 5px;}. Box_IMG IMG {Width: 150px; hauteur: auto;}app.js:
window.onload = function () {imglocation ("conteneur", "box"); // ajax simulé les données var imgdata = {"data": [{"src": "2.jpg"}, {"src": "3.jpg"}, {"src": "4.jpg"}, {"src": "5.jpg"}, {"src": "6.jpg"}, {"src": "8.jp" g "}, {" src ":" 2.jpg "}, {" src ":" 3.jpg "}, {" src ":" 4.jpg "}, {" src ":" 5.jpg "}, {" src ":" 6.jpg "}, {" src ":" 8.jpg "}}} window.onscroll = function () {if (checkFlag ()) {// juger si les nouvelles données doivent être chargées en bas var carent = document.getElementById ("conteneur"); // Chargez les données ajax dans la page pour (var i = 0; i <imgdata.data.length; i ++) {var cContent = document.CreateElement ("div"); cContent.className = "Box"; CParent.ApendChild (ccontent); var boxImg = document.CreateElement ("div"); boximg.classname = "box_img"; CContent.ApendChild (BoxImg); var img = document.CreateElement ("img"); img.src = "img /" + imgdata.data [i] .src; BoxImg.ApendChild (IMG); } // repositionner toutes les données d'image une fois imglocation ("conteneur", "box"); }}}; fonction CheckFlag () {var cparent = document.getElementById ("conteneur"); var cContent = getChildElement (carent, "box"); // Obtenez la hauteur de la dernière image du haut, de la hauteur de défilement, de la hauteur de la fenêtre var lastContentHeight = cContent [ccontent.length-1] .offsetTop; var scrolltop = document.DocumentElement.ScrollTop || document.body.scrolltop; var pageHeight = document.DocumentElement.ClientHeight || document.body.clientHeight; console.log (LastContentHeight + ":" + ScrollTop + ":" + PageHeight); if (LastContentHeight <ScrollTop + PageHeight) {return true; }} fonction imglocation (parent, contenu) {// retirer tous les contenus sous parent hors de var cparent = document.getElementById (parent); var cContent = getChildElement (carent, contenu); // corrige le nombre d'images par ligne en fonction de la largeur de la fenêtre actuelle du navigateur et le réparez, central var imgwidth = ccontent [0] .offsetWidth; // OFFSetWidth = Width + Padding + Border var num = Math.floor (document.DocumentElement.ClientWidth / ImgWidth); cparent.style.csstext = "width:" + imgwidth * num + "px; margin: 0 auto"; // alert ("pause"); // Définissez un tableau pour héberger les informations d'image de la première ligne var boxHeightAr = []; for (var i = 0; i <cContent.length; i ++) {if (i <num) {// enregistrez la hauteur de l'image dans la première ligne boxHeightarr [i] = cContent [i] .offsetHeight; // Lorsque les données AJAX sont chargées, le programme repositionne toutes les images, de sorte que l'image dans la première ligne doit être effacée de position: CContent absolu [i] .style.position = "statique"; } else {var minheight = math.min.apply (null, boxHeightarr); var minindex = getminheightLocation (BoxHeightarr, MinHeight); // Mettez l'image sous la plus petite valeur d'index de la première ligne ccontent [i] .style.position = "Absolute"; cContent [i] .style.top = minHeight + "px"; cContent [i] .style.left = cContent [minindex] .offsetleft + "px"; // Une fois l'image placée, mettez à jour la "hauteur minimale de la première ligne d'informations d'image", // utilisez ensuite la boucle pour répéter cette action jusqu'à la fin BoxHeightAr [minindex] = boxHeightarr [minindex] + cContent [i] .offsetheight; }};} // Obtenez la valeur d'index avec la plus petite hauteur de la première ligne d'image getminheightLocation (BoxHeightarr, MinHeight) {for (var i in boxHeightarr) {if (boxHeightarr [i] == MinHeight) {return i; }}} // Obtenez tous les boxFunction getChildElement (parent, contenu) {contentArr = Parent.getElementsByClassName (contenu); return contentarr;}Image de reproduction:
Ce qui précède concerne cet article, j'espère qu'il sera utile pour tout le monde d'apprendre la programmation JavaScript.