Implementierung von Wasserfall-Layout + dynamischem Rendering

var Leerzeichen = (wParent – ​​5 * Breite) / (Spalte – 1);
// wParent ist die Breite der übergeordneten Box, width ist die Breite der untergeordneten Box, col ist die Anzahl der Spalten

<!--Seitencontainer-->
<div Klasse = "Container">
      <!--Die Sammlung aller Elemente, mit einem Abstand vom oberen Rand-->
      <div Klasse = "Artikel">
             <!--Jeder kleine Block enthält Bilder und Text-->
              <div Klasse = "Artikel">
                    <img src = "" />
                    <p>Hallo</p>
              </div>

              <div Klasse = "Artikel">
                    <img src = "" />
                    <p>Hallo</p>
              </div>
      </div>
</div>
<div Klasse = "btn">Wird geladen...</div>

/*Selbstaufruf bildet einen Abschluss*/
(Funktion($){
/*Wenn Sie jQuery nicht hinzufügen, ist das verwendete $ eine globale Variable, und nach dem Hinzufügen wird die Mitgliedsvariable verwendet*/

})(jQuery);

/*js/jquery-waterfall.js*/
(Funktion($){
     $.fn.waterfall = Funktion(){
        /*Dies bezieht sich auf den Elementsatz, der diese Methode aktuell aufruft (der Elementsatz ist ein von jQuery erhaltenes Pseudoarray)*/
         konsole.log(dies);
     }
})(jQuery);

(Funktion($){
    $.fn.waterfall = Funktion(){
    // dies bezieht sich auf den Elementsatz, der diese Methode aktuell aufruft // Der aktuelle übergeordnete Wasserfallcontainer var items = $(this);
        //Breite des übergeordneten Containers var wParent = items.width();
        //Aktueller Wasserfall-Untercontainer var child = items.children();
        //Breite des untergeordneten Containers abrufen var width = child.width();
        //Annehmen, wie viele Spalten es gibt var col = 5;
        //Berechnen Sie den Abstand (Breite des übergeordneten Elements minus Breite aller Felder / 4)
        var Leerzeichen = (wParent - Spalte * Breite) / (Spalte - 1);

        //Array, das die Höhe jeder Spalte aufzeichnet, var colHeightArr = [];

        //Jedes untergeordnete Element durchlaufen$.each(child,function(i,item){
            var $item = $(item);
            var Höhe = $item.height();

            //Positionierung festlegen //Die Elemente in der ersten Zeile stehen alle oben, daher beginnt der Index bei 0, und wenn er kleiner als 5 ist, steht er oben if (i < col ) {
                $item.css({
                    oben: 0,
                    links:i * (Breite + Leerzeichen)  
                });
               //Die Höhe zum Array hinzufügen colHeightArr[i] = height;
                //Sie können auch colHeightArr.push(height); verwenden.
            }
            //Die anderen sollten nach der kürzesten Spalte sortiert werden});
    }
})(jQuery);

(Funktion($){
    $.fn.waterfall = Funktion(){
    // dies bezieht sich auf den Elementsatz, der diese Methode aktuell aufruft // Der aktuelle übergeordnete Wasserfallcontainer var items = $(this);
        //Breite des übergeordneten Containers var wParent = items.width();
        //Aktueller Wasserfall-Untercontainer var child = items.children();
        //Breite des untergeordneten Containers abrufen var width = child.width();
        //Annehmen, wie viele Spalten es gibt var col = 5;
        //Abstand berechnen var space = (wParent - col * width) / (col - 1);

        //Array, das die Höhe jeder Spalte aufzeichnet, var colHeightArr = [];

        //Jedes untergeordnete Element durchlaufen$.each(child,function(i,item){
            var $item = $(item);
            var Höhe = $item.height();

            // Positionierung // Die Elemente der ersten Zeile stehen alle oben // Der Index beginnt bei 0, und wenn er kleiner als 5 ist, steht alles oben if (i < col ) {
                $item.css({
                    oben: 0,
                    links:i * (Breite + Leerzeichen)
                });

                //colHeightArr[i] = Höhe;
                colHeightArr.push(Höhe);
   
             //Die anderen sollen nach der kürzesten Spalte sortiert werden}else{    
                //Kürzeste Spalte zum Sortieren suchen//Index var index = 0;
                //Angenommen, die Mindesthöhe ist die Höhe, die dem ersten Index entspricht. var minHeight = colHeightArr[index];
                //Array durchlaufen und den Minimalwert und den Index finden, der dem Minimalwert entspricht //k ist der Index, v ist der Wert $.each(colHeightArr,function(k,v){
                    wenn(minHöhe > v){
                        Index = k;
                        minHöhe = v;
                    }
                });

                //Suchen Sie $item.css({
                    oben: min. Höhe + Leerzeichen,
                    links:Index * (Breite + Leerzeichen)
                })

                //Aktualisiere die Mindesthöhe im aktuellen Array auf eine neue Höhe colHeightArr[index] = minHeight + space + height;
            }
            //console.log(colHeightArr);
        });

        //Höhe des übergeordneten Containers festlegen var maxHeight = colHeightArr[0];
        $.each(colHeightArr,Funktion(k,v){
            wenn(maxHöhe < v){
                maxHöhe = v;
            }
        });
        //Maximale Höhe des übergeordneten Containers festlegen items.height(maxHeight);
    }
})(jQuery);

$(".items").Wasserfall();

/*Nachdem alle Ressourcen auf der Seite geladen sind, wird das Layout ausgeführt. Andernfalls kann die Bildgröße nicht ermittelt und die Höhe der Box nicht erweitert werden*/
fenster.onload = funktion(){
  $(".items").Wasserfall();
}

//Warum nicht jQuery verwenden? Weil diese Methode geladen wird, nachdem das DOM-Element heruntergeladen wurde. Es ist notwendig, zu warten, bis alle Ressourcen geladen sind, bevor sie angeordnet werden./*   
$(Funktion(){
	//console.log('dom geladen');
});    
*/

<div Klasse="Container">
    <div Klasse="Artikel">
        <!--TODO, wo Daten gerendert werden müssen-->
    </div>
    <div class="btn loading">Wird geladen...</div>
</div>

$(Funktion(){
        //Dynamisches Wasserfall-Rendering realisieren //Rendering var render = function(){
            // Daten laden, um das Wasserfall-Layout der Seite darzustellen $.ajax({
                Typ: 'get',
                URL: „data.php“,
                Daten:{
                    //Die erste Seite page:1,
                    //10 Elemente pro Seite pageSize:10
                },
                Datentyp: „json“,
                Erfolg:Funktion(Daten){
                    konsole.log(Daten);
                }
            });
        }

        machen();
    });

<script Typ="text/Vorlage" id="Vorlage">
    <% für(var i=0 ; i<items.length ; i++){ %>
        <div Klasse="Artikel">
            <img src="<%=items[i].path%>" alt="">
            <p><%=items[i].text%></p>
        </div>
    <% } %>
</Skript>

<Skript>
  $(Funktion(){
    //Holen Sie sich den DOM, der bedient werden muss
    var $items = $(".items");
    var $btn = $(".btn");
    // Rendern var render = function(){
        // Daten laden, um das Wasserfall-Layout der Seite darzustellen $.ajax({
            Typ: 'get',
            URL: „data.php“,
            Daten:{
                Seite:1,
                Seitengröße:10
            },
            Datentyp: „json“,
            Erfolg:Funktion(Daten){
                konsole.log(Daten);
                $items.append(Vorlage('Vorlage',Daten));
                //Wasserfall-Layout $items.waterfall();
                //Schaltfläche ändern $btn.removeClass('loading').html('Mehr laden');
            }
        });
    }
    
    machen();
  });
</Skript>

 $(Funktion(){
    //Holen Sie sich den DOM, der bedient werden muss
    var $items = $(".items");
    var $btn = $(".btn");

    // Rendern var render = function(){
        // Daten laden, um das Wasserfall-Layout der Seite darzustellen $.ajax({
            Typ: 'get',
            URL: „data.php“,
            Daten:{
                //Seitenzahl der nächsten Seite abrufen. Wenn keine Seitenzahl vorhanden ist, ist der Standardwert 1.
                Seite:$btn.data("Seite")||1,
                //10 Elemente pro Seite pageSize:10
            },
            vorSenden:Funktion(){
                $btn.addClass("loading").html('Wird geladen...');
            },
            Datentyp: 'json',
            Erfolg:Funktion(Daten){
                konsole.log(Daten);
                //Vorlage vorbereiten//Da es sich um ein Anhängen handelt, können Sie kein HTML verwenden. Sie müssen Anhängen verwenden.
                        //Der Grund für die direkte Verwendung von Daten besteht darin, dass Daten ursprünglich ein Objekt mit vielen Attributen und kein Array sind. Dies ist bei einem Array nicht möglich, da Daten nur ein Attribut haben: Länge. $items.append(template('template',data));
                //Wasserfall-Layout $items.waterfall();

                wenn (Daten.Elemente.Länge) {
                    //Schaltfläche ändern//Daten sind ein benutzerdefiniertes Attribut. Die von der Seite übertragenen Daten werden im benutzerdefinierten Attribut gespeichert.
                    $btn.data("page",data.page).removeClass('loading').html('Mehr laden');
                }anders{
                    //Keine weiteren Daten//Um festzustellen, wann keine weiteren Daten vorhanden sind, öffnen Sie das letzte Objekt, bei dem die Länge des Elemente-Arrays Null ist. $btn.addClass("loading").html("Keine weiteren Daten");
                }
            }
        });
    }

    //Schaltfläche wird geladen $btn.on('click',function(){
        // Vermeiden Sie das Senden mehrerer Ajax-Anfragen. Entscheiden Sie einfach, ob es sich im Ladezustand befindet, beenden Sie es.
        wenn($btn.hasClass("wird geladen")){
            gibt false zurück;
        }
        machen();
    })

    machen();
});

 $(Funktion(){
    // Dynamisches Wasserfall-Rendering realisieren // Den zu bedienenden DOM abrufen
    var $items = $(".items");
    var $btn = $(".btn");

    // Rendern var render = function(){
        // Daten laden, um das Wasserfall-Layout der Seite darzustellen $.ajax({
            Typ: 'get',
            URL: „data.php“,
            Daten:{
                Seite:$btn.data("Seite")||1,   
                Seitengröße:10
            },
            vorSenden:Funktion(){
                $btn.addClass("loading").html('Wird geladen...');
            },
            Datentyp: „json“,
            Erfolg:Funktion(Daten){
                konsole.log(Daten);
                $items.append(Vorlage('Vorlage',Daten));
                //Wasserfall-Layout $items.waterfall();

                //Beurteilen, ob das Array Daten enthält if(data.items.length){
                 $btn.data("page",data.page).removeClass("loading").html('Mehr laden');
                }anders{
                    $btn.addClass("loading").html("Keine weiteren Daten");
                }
            }
        });
    }

    //Scrollen beim Laden $(window).on('scroll',function(){
        //Das Dokument muss weniger als 200 Pixel vom unteren Rand entfernt sein, damit es geladen werden kann //und der Ladevorgang kann nach Abschluss fortgesetzt werden //Die Höhe der Elemente var itemsHeight = $items.height();
        //Der Versatz der Elemente vom oberen Rand var itemsTop = $items.offset().top;
        //Der Abstand der gesamten Seite von der Oberseite des Curls var scrollTop = $(document).scrollTop();
        // Browserhöhe var winHeight = $(window).height();
        // Der Abstand zwischen der Unterseite des Browsers und der Unterseite der Elemente var bottom = itemsHeight + itemsTop - scrollTop -winHeight;
        // Bestimmen Sie, ob die Schaltfläche im Ladezustand ist. var loading = $btn.hasClass("loading");

        //Wenn die Schaltfläche kleiner als 200 ist und sich nicht im Ladezustand befindet, starte den Ladevorgang, if(bottom < 200 && !loading){
            machen();
        }
    })

    machen();
});

//Schreiben Sie in die Template-Engine <img height = "<%=items[i].width * items[i].height / width%>" src = "<%=items[i].path%>" />
/*  
Ähnlich verhält es sich beim Ajax-Erfolg: $items.append(
    Vorlage('Vorlage',{
        Daten:Daten,
        Breite:Breite
    })
);
Auf diese Weise kann die Breitenvariable verwendet werden.
*/