JavaScript natif LESS implémente les compétences Waterfall flow_javascript

HTML (faites attention à la relation package pour faciliter les appels js)

Copier le code Le code est le suivant :

 
    

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

        

            

                
            

        

    

 

MOINS(moins预编译)

复制代码 代码如下 :

 * {
     marge : 0;
     remplissage : 0 ;
 >
 #principal {
     position : relative ;
 
 >
 .boîte {
     remplissage : 15px 0 0 15px ;
     float:gauche;
 >
 .pic {
     remplissage : 10 px ;
     bordure : 1px solide #ccc;
     rayon de bordure : 5 px ;
     ombre-boîte : 0px 0px 5px #ccc;
     img {
         largeur:165px;
         hauteur:auto;
     >
 >

JavaScript(自己理解的注解)

(函数存在一定瑕疵,仅用于学习理解)

复制代码 代码如下 :

window.onload = fonction () {
cascade("main","box");
//Appelle une fonction personnalisée ; agit sur chaque élément de la boîte sous main;
var dataInt = { "data":[{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src": "6.jpg"}]}
//Simuler les données json ;
​​ Window.onscroll = fonction () {
             if (checkScrollSlide) {
//Appelle une fonction personnalisée ; détermine si le défilement est hors de portée en fonction de la valeur de retour de la fonction ;
            var oParent = document.getElementById("main");
pour (var i = 0; i                 var oBox = document.createElement("div");
                  oBox.className = "box";
                    oParent.appendChild(oBox);
//Créer un bloc boîte
                var oPic = document.createElement("div");
                   oPic.className = "pic"
oBox.appendChild(oPic);
//Créer un bloc d'images
                var oImg = document.createElement("img");
//Créer un élément img
                 oImg.src = "images/" dataInt.data[i].src;
//Définir la référence de l'image ;
oPic.appendChild(oImg);
              };
cascade("main","box");
// Disposition des blocs de données générés dynamiquement en streaming ;
          };
};
};
//Fonction principale de la mise en page du streaming, ajuste automatiquement la position des blocs de données ;
fonction cascade (parent,box) {
// Supprime tous les éléments box sous main ; "parent" représente le parent et box représente l'élément box
; var oParent = document.getElementById(parent);
//Assigner l'élément parent à la variable oParent;
var oBoxs = getByClass(oParent,box);
//Grâce à la fonction personnalisée, récupérez chaque élément de boîte sous le parent ; ce que vous obtenez est la collection de tous les éléments de boîte
 ; //Attribuez à nouveau l'ensemble d'éléments de boîte obtenu aux oBoxs (en raison de problèmes de portée, les variables ne sont pas partagées) ;
// console.log(oBoxs.length);
//Imprime le nombre d'éléments de boîte dans la console pour le débogage ;
var oBoxW = oBoxs[0].offsetWidth;
//Calculez la largeur de chaque colonne ; offsetWidth est la largeur, remplissage compris
// console.log(oBoxW); test;
var cols = Math.floor(document.documentElement.clientWidth/oBoxW);
//Calculer le nombre de colonnes affichées sur la page entière (largeur de la page/largeur de la zone) ;
oParent.style.cssText = "width:" oBoxW*cols "px;margin:0 auto";
//La largeur de l'élément parent main = la largeur de chaque colonne * le nombre de colonnes ; et centré à gauche et à droite
; var hArr = [];
//Tableau stockant la hauteur de chaque colonne ;
pour (var i = 0; i //Parcourir le tableau oBoxs ;
Si (i //Le qualifié ici est le premier de chaque colonne de la première ligne ;
hArr.push(oBoxs[i].offsetHeight);
//Obtenir la hauteur de chaque colonne et la mettre dans le tableau ;
          }autre{
//L'élément box ici n'est plus l'élément de la première ligne ;
            var minH = Math.min.apply(null,hArr);
//Obtenir la hauteur minimale de la première ligne et l'attribuer à la variable ;
                         // console.log(minH);
            var index = getMinhIndex(hArr,minH);
//Appelle une fonction personnalisée pour obtenir la valeur d'index de cette variable ;
              oBoxs[i].style.position = "absolu";
oBoxs[i].style.top = minH "px";
               oBoxs[i].style.left = oBoxW*index "px";
//Définit la position de l'élément actuel ;
//La valeur gauche de l'élément actuel = la valeur d'index de l'élément supérieur * la largeur de chaque colonne
; //oBoxs[i].style.left = oBoxs[index].offsetLeft "px";
//La deuxième méthode consiste à obtenir la valeur gauche de l'élément actuel ;
//A ce moment, un élément box est ajouté à la colonne d'index ;
hArr[index] =oBoxs[i].offsetHeight;
//La hauteur mise à jour de chaque colonne = la hauteur d'origine de chaque colonne et la hauteur de l'élément box ajouté ultérieurement ;
          };
};
};
//JS obtient nativement les éléments via Class ;
fonction getByClass (parent,claName) {
//Récupère les éléments via la classe ; (Récupère l'élément de claName sous le conteneur du parent parent ;)
var boxArr = nouveau tableau();
//Déclarez un tableau pour stocker tous les éléments obtenus avec la classe box ;
var oElements = parent.getElementsByTagName("*")
//Déclarez les variables pour stocker tous les éléments enfants sous cet élément parent (*);
pour (var i = 0; i //Parcourir le tableau oElements;
Si (oElements[i].className==claName) {
//Si la classe calss d'un élément du tableau est la même que le paramètre claName;
               boxArr.push(oElements[i]);
//Catégorie l'élément box traversé dans le tableau boxArr ;
          };
};
Boîte de retourArr;
//Après avoir appelé le tableau, parcourez une série de fonctions ; renvoyez le tableau obtenu à la fonction appelante
 ; };
//Obtenir la valeur d'index de l'élément du tableau ;
fonction getMinhIndex (arr,val) {
//arr est le tableau parent ; val est l'élément actuel
pour(var i dans arr){
//Commencer à parcourir à partir de 0 ;
Si(arr[i]==val){
//Trouver la valeur d'index correspondant à l'élément actuel dans le tableau ;
               retourner i ;
//La valeur de retour de la fonction est la valeur d'index de l'élément courant ;
          };
};
};
//Vérifiez si les conditions de chargement continu des blocs de données sont remplies ;
fonction checkScrollSlide () {
var oParent = document.getElementById("main");
var oBoxs = getByClass(oParent,"box");
var lastBoxH = oBoxs[oBoxs.length-1].offsetTop Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);
//La hauteur du dernier élément de la boîte à partir du haut de la page (trouver le offsetTop de la dernière boîte (oBoxs.lenght-1)) la moitié de lui-même
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
//La distance de défilement de la barre de défilement du navigateur ;
// console.log(scrollTop);
var hauteur = document.body.clientHeight || document.documentElement.clientHeight;
//Hauteur de la fenêtre du navigateur ;
// console.log(hauteur);
Retour (lastBoxH //Si la distance de défilement de la page est supérieure au offsetTop du dernier élément box ;
};

Résumé :

Il n'y a rien de mieux que d'utiliser le flux en cascade pour afficher des photos. Ce qui suit est une méthode d'implémentation du flux en cascade (la longueur de chaque ligne est égale à la longueur de la fenêtre du navigateur). est très simple. Vous pouvez le découvrir en effectuant une recherche sur Google.
Mon idée est d'insérer les images une par une. Lorsque le rapport hauteur/largeur des images de cette ligne reste inchangé et que la hauteur est inférieure à 250, un cycle est terminé, c'est-à-dire que cette ligne est insérée.
Entrez ensuite la boucle suivante pour insérer la ligne suivante.