So implementieren Sie einen Wasserfallfluss mit zufälligem Layout in ionic3

Dieser Artikel stellt Ihnen hauptsächlich die Implementierungsmethode des Zufallslayout-Wasserfallflusses im praktischen Tutorial von ionic3 vor. Der Artikel stellt ihn anhand von Beispielcodes und Bildern ausführlich vor , lass uns zusammen lernen.

Vorwort

Kürzlich bin ich aufgrund von Projektanforderungen mit ionic3 in Kontakt gekommen und habe festgestellt, dass es wirklich ein scharfes Werkzeug ist Das Projekt bietet einen umfangreichen Satz an Symbolen. Die Bibliothek wurde auch in ionic3 aktualisiert.

In einem der Projekte des Unternehmens war ein Wasserfall-Spezialeffekt erforderlich. Nachdem ich lange gesucht hatte, blieb mir nichts anderes übrig, als es zu tun~

Ohne Umschweife hier die Bilder

Ich glaube, dass Schüler, die das Bild gesehen haben, verstehen werden, was es bedeutet. Ja, es ist ein Wasserfall!

Aber heute ist unser Wasserfall kein gewöhnlicher Wasserfall. Fahren wir fort mit:

Automatisches Layout

Unsere Anforderung ist es, dieses zufällige und chaotische Gefühl zu erzeugen, also müssen wir einen Mechanismus entwickeln. um die optimale Anordnungsmethode für die Anzeige der Bilder auf der Seite auszuwählen, d 🎜>

Ich glaube, dass dieser Effekt mit gewöhnlichen JQ-Plug-Ins nicht schwer zu erreichen ist. Tatsächlich sind einige JQ-Plug-Ins auch online zu finden. Aber unser Technologie-Stack ist Angular4~In ng werden unsere DOM-Operationen grundsätzlich in Anweisungen platziert. Ich glaube, dass Schüler, die Angularjs1.x verwendet haben, damit vertraut sind~, das Gleiche gilt für Angular4.

Okay, lass uns den Code posten~

Anweisungen erstellen

Wir gehen davon aus, dass Sie After haben Sie haben die relevanten Komponenten in Ihrem ionic etabliert und verfügen bereits über die Bilddaten. Wenn Sie nicht über die entsprechende Grundlage verfügen, empfehle ich Ihnen, sich zunächst die Einführung zu ionic3 und Angular4 anzusehen.

Dies ist eine meiner Komponenten-HTML-Seiten. Vielleicht haben scharfsichtige Schüler unseren Befehl [imagr-sort]="item" entdeckt, ja, unser Befehl erfordert das Winkeldaten Ihres aktuellen Bildes.

Erstellen Sie einen Befehl ts

Führen Sie den Befehl aus, der uns erstellt.

ionic g directive image-sort

Nachdem wir unsere benutzerdefinierten Anweisungen erstellt haben, sieht es so aus: leer~

Schreiben Sie unsere Logik

1.1 empfängt und spritzt etwas:

Sehen Sie sich das Bild an!

Da wir Eingaben in der Vorlage haben

, sollten wir natürlich die Eingabedaten im Befehl erhalten, wie durch den roten Pfeil im Screenshot gezeigt; Geben Sie die Daten ein ->sourceArr;

Wenn wir dann einige Attribute des Dom-Hosts, Elemente usw. in Angular4 erhalten möchten, müssen wir ElementRef verwenden, ein ähnliches Rendering in Angular4 Über das Gerät habe ich diese spezielle Sache noch nicht verstanden. Sie können mehr über diese Information lesen. Ich verwende diesen Befehl hauptsächlich, um einige Strukturen des Doms zu ändern.

([[imagr-sort]="item"]);Über unsere imgLength werde ich später sprechen

1.2 Seien Sie realistisch! Das Bild wird asynchron geladen!

Lassen Sie uns zunächst über diese Frage nachdenken: Unsere Anweisungen werden ausgeführt, wenn Winkeldaten gerendert werden. Dies ist im Grunde von jedem verstanden.

aber! Unsere Bilder werden alle asynchron geladen~, daher müssen wir natürlich einen Bildladeprozess haben:

Nun, ich glaube, Sie haben bereits darüber nachgedacht ---- >

, ja, das ist es~

Es ist Zeit, über die vorherige imgLength zu sprechen. Diese Variable wird verwendet, um die Anzahl der abgeschlossenen Bilder aufzuzeichnen und um festzustellen, ob die aktuellen Bilder geladen wurden dienen als Grundlage für unser weiteres Handeln.

image.onerror, ich glaube, das versteht jeder. Dies ist eine Funktion, die das Bild nicht laden kann. Was ich im Inneren tue, ist, die Winkeldaten des Bildes zu entfernen, das nicht aus dem ursprünglichen DOM geladen werden konnte.

Hier kommt unser Angular-Renderer zum Einsatz this.render2();

Sie können den Quellcode für verwandte Funktionen und Methoden überprüfen. Grundsätzlich sind alle häufig verwendeten Dom-Operationen implementiert.

Die for-Schleife ist darauf zurückzuführen, dass wir über mehrere Bilddaten verfügen und daher warten müssen, bis jedes Bild erfolgreich geladen wurde.

ps:Beachten Sie, dass Sie bei Verwendung in onerror- und onload-Funktionen Variablenreferenzen in imgOnlod let _self = this;

verwenden müssen Das Bild wird geladen und unser Transformationsprojekt beginnt

1.3 Teilen Sie unser Schmackhaftes in Raster auf

imageStartStort()!

Das Bild oben

Sehen Sie sich den roten Kreis in Bild 1 an. Ich habe die fünf horizontalen Rasterstandards selbst unterteilt, um später die Proportionen des Bildes zu erleichtern . Machen Sie Vergleiche.

1.4 Besetzen Sie unser Bilddefinitionsraster

Wir haben ein Array allImageArr=[] erstellt ; dient zum Speichern der Daten aller aktuell verarbeiteten Bilder.

Erinnern Sie sich an die Winkeldaten, die wir zuvor erhalten haben. Wir unterteilen das Bild in Gitter, indem wir es durchlaufen.

Was machen wir in unserem Loop?

1. Die Breite und Höhe des Bildes und die Proportionen jedes Bildes ermitteln.

2. Teilen Sie das erhaltene Bildverhältnis mit unserem eigenen definierten Rasterverhältnis in Intervalle auf.

3. Berechnen Sie die neue Breite des Bildes, das das Raster einnimmt, entsprechend dem von uns geteilten Raster. Die Anzahl der belegten Raster wird in unserem benutzerdefinierten allImageArr gespeichert und aufgezeichnet, und im ursprünglichen Winkel wird die Rasterzahl zum hinzugefügt Daten, um die entsprechende Rasternummer aufzuzeichnen.

Führen Sie die this.pictureColumnSort-Methode aus;

Unsere Bilder wurden geteilt. Als nächstes wollen wir einen Moment der Leidenschaft verbringen~

1,5 Bildanordnung, laut The Raster wählt die am besten geeigneten Nachbarn aus~

pictureColumnSort()!

Das obige Bild

Dieser Prozess ist tatsächlich auch da Es gibt nicht viel zu sagen, die Hauptsache ist, eine Schleife durchzuführen, die Anzahl der Gitter jedes Bildes zu überprüfen, die am besten geeigneten nebeneinander zu sortieren (den nächsten Schritt ausführen: goExchange-Funktion) und schließlich eine 5-Punkte-Gitterstrategie für diese zu verwenden das kann nicht übereinstimmen.

kann in vielen Formaten vorliegen:

3+2, 1+4, 1+1+3, 1+3+1, 2+3. . . . .

Wie kann man glücklich sein~

Es gibt nichts zu sagen, durchlaufen Sie einfach die Filterung, schauen Sie sich einfach das Bild an.

1.6 Unordnung wird geordnet, es sollte keine bessere Wahl geben als Umtausch

goExchange()>Oben Bild

Sehen Sie sich den Code in 1.5 an. Wir führen diese Funktion jedes Mal aus, wenn ein passendes Bild gefunden wird, da wir die Position des passenden Bildes ändern müssen!
Die in dieser Funktion empfangenen Wiederholungen I und Wiederholungen sind die Indizes der Doppelschleife in 1.5. Dieser Index bestimmt die Position, an der wir das Bild ändern.

Das im Code gezeigte Prinzip besteht darin, das übereinstimmende Bild hinter unserem aktuellen Bild zu ersetzen und dann das Originalbild dahinter an der Position des ersetzten Bildes hinzuzufügen. Dies ist etwas kompliziert und liegt möglicherweise an mir Schlechte Spielfähigkeit, Ha ha.

Zu dieser Funktion gibt es nichts zu sagen, sie verändert nur die Position.

1.7 Von den Stärken des anderen lernen und die Schwächen ausgleichen, fertig!

setHeight()! Das Bild oben

Schleife erneut (der Code sollte noch viele Verbesserungen aufweisen, die Schleife wird häufig verwendet ~) ;

Zu diesem Zeitpunkt ist unsere Layoutseite fertig, aber die Größe unserer Bilder ist tatsächlich unregelmäßig, was unerträglich anzusehen ist
Also glätten wir die Unterschiede in dieser Funktion und Von den Stärken des anderen lernen.

Tatsächlich wird unser Bild definitiv ein wenig gedehnt, daher nehmen wir auch einen ausgewogenen Mittelpunkt, um eine entsprechende Dehnung durchzuführen.

Diese Funktion kann definitiv einige entsprechende Einschränkungen vornehmen, um die Bildgrößenanpassung zu verfeinern. An diesem Punkt haben wir das Schreiben der gesamten Befehlslogik abgeschlossen.

Fertig! ioinc servieren

Was den mittleren Anrufprozess betrifft, möchte ich eines erklären:

setTimeout(() => {
  _self.setHeight(angularImageList, ele);
  });

Ich habe den gesamten Anruf nur genutzt, als ich in der Nachtschicht hilflos war, wenn ich den Blickwinkel und den Datensatz nicht hinzufüge In der setHeight-Funktion für den gesamten Aufruf tritt aus unerklärlichen Gründen ein Fehler auf. Wenn Sie die gesamte Lösung sehen können, teilen Sie sie bitte mit.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie Aufrufe zwischen Methoden in Vue

Wie Vux die Pull-up-Refresh-Funktion implementiert

So implementieren Sie ein Bildkarussell mit jQuery

Das obige ist der detaillierte Inhalt vonSo implementieren Sie einen Wasserfallfluss mit zufälligem Layout in ionic3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!