Comment implémenter un flux de cascade à disposition aléatoire dans ionic3

Cet article vous présente principalement la méthode d'implémentation du flux de cascade à disposition aléatoire dans le didacticiel pratique ionic3. L'article la présente en détail à travers des exemples de code et des images. Il a une certaine valeur d'apprentissage de référence pour l'étude ou le travail de chacun. , étudions ensemble.

Avant-propos

Récemment, je suis entré en contact avec ionic3 en raison des besoins du projet, et j'ai découvert que c'était vraiment un outil pointu ! fournit un riche ensemble d'icônes. La bibliothèque a également été mise à niveau dans ionic3.

Dans l'un des projets de l'entreprise, un effet spécial de flux de cascade était nécessaire. Après de longues recherches, je n'ai pas trouvé les ressources pertinentes, je n'avais d'autre choix que de le faire~

<.>

Sans plus attendre, voici les photos

Je crois que les étudiants qui ont vu l'image comprendront ce qu'elle signifie. Oui, c'est une cascade !

Mais aujourd’hui, notre cascade n’est pas une cascade ordinaire. Passons à :

Mise en page automatique

Notre exigence est de créer cette sensation aléatoire et désordonnée, nous devons donc créer un mécanisme, choisir la méthode de disposition optimale pour afficher les images sur la page, c'est-à-dire s'assurer que le rapport de l'image par rapport aux images adjacentes est le plus approprié, puis mettre en œuvre la disposition

angular4<.> Je pense que cet effet n'est pas difficile à obtenir avec des plug-ins jq ordinaires. En effet, certains plug-ins jq peuvent également être trouvés en ligne. Mais notre pile technologique est angulaire4~

En ng, nos opérations DOM sont essentiellement placées dans des instructions. Je pense que les étudiants qui ont utilisé angulairejs1.x le connaissent bien~, il en va de même dans angulaire4.

D'accord, publions le code~

Créer des instructions

Nous supposons que vous avez Après vous avez établi les composants pertinents dans votre ionic et disposez déjà des données d'image, si vous n'avez pas les bases pertinentes, je vous suggère de jeter d'abord un œil à l'introduction à ionic3 et angulaire4.

C'est l'une de mes pages HTML composantes. Peut-être que des étudiants aux yeux perçants ont découvert notre commande [imagr-sort]="item", oui, notre instruction nécessite le. données angulaires de votre image actuelle.

Créer une commande ts

Exécuter la commande qui nous construit.

ionic g directive image-sort

Après avoir créé nos instructions personnalisées, voici à quoi cela ressemble, vide~

Écrivez notre logique

1.1 reçoit et injecte quelque chose :

Regardez la photo !

Puisque nous avons une entrée dans le modèle

alors bien sûr, nous devrions recevoir les données d'entrée dans la commande comme indiqué par la flèche rouge dans la capture d'écran, je le ferai ; enter Les données sont enregistrées ->sourceArr;

([[imagr-sort]="item"]); Ensuite, si nous voulons obtenir certains attributs de l'hôte dom, des éléments, etc. dans angulaire4, nous devons utiliser ElementRef Renderer2 est un rendu similaire dans angulaire4 C'est quelque chose. à propos de l'appareil. Je n'ai pas encore compris cette chose spécifique. Vous pouvez en savoir plus sur cette information. J'utilise principalement cette commande pour modifier certaines structures du Dom.

A propos de notre imgLength, j'en parlerai plus tard

1.2 Soyez réaliste ! L'image est chargée de manière asynchrone !

Réfléchissons d'abord à cette question :

Nos instructions commencent à s'exécuter lorsque les données angulaires sont rendues. Ceci est fondamentalement compris par tout le monde.

mais ! Nos images sont toutes chargées de manière asynchrone ~, nous devons donc naturellement avoir un processus de chargement d'image :

Eh bien, je crois que vous y avez déjà pensé ---- >

, oui, c'est tout ~

image.onload Il est temps de parler de l'imgLength précédent. Cette variable est utilisée pour enregistrer le nombre d'images terminées et permet d'identifier si les images actuelles ont été chargées. servir de base à nos actions ultérieures.

image.onerror, je pense que tout le monde comprend cela. Il s'agit d'une fonction qui ne parvient pas à charger l'image. Ce que je fais à l'intérieur, c'est de supprimer les données angulaires de l'image qui n'ont pas pu être chargée du DOM d'origine.

Notre moteur de rendu angulaire est utilisé ici this.render2();

Vous pouvez consulter le code source pour les fonctions et méthodes associées. Fondamentalement, toutes les opérations Dom couramment utilisées sont implémentées.

La boucle for est due au fait que nous avons plusieurs éléments de données d'image, nous devons donc attendre que chaque image soit chargée correctement.

ps :Notez que lorsque vous l'utilisez dans les fonctions onerror et onload, vous devez utiliser des références de variables dans imgOnlod let _self = this;

L'image est chargée et notre projet de transformation commence

1.3 Divisez notre appétence en grilles

imageStartStort() !

L'image ci-dessus

Regardez le cercle rouge sur l'image 1. J'ai moi-même divisé les cinq standards de grille horizontale pour faciliter la proportion de l'image plus tard .Faites des comparaisons.

1.4 Occuper notre grille de définition d'image

Nous avons créé un tableau allImageArr=[] ; utilisé pour sauvegarder les données de toutes les images en cours de traitement.

Rappelez-vous les données angulaires que nous avons obtenues auparavant, nous divisons l'image en grilles en la parcourant en boucle.

Que fait-on dans notre boucle ?

1. La largeur et la hauteur de l'image, et trouvez la proportion de chaque image.

2. Divisez le rapport d'image obtenu en intervalles avec notre propre rapport de grille défini.

3. Calculez la nouvelle largeur de l'image occupant la grille en fonction de la grille que nous avons divisée. Le nombre de grilles occupées est stocké et enregistré dans notre allImageArr personnalisé, et dans l'angle d'origine Ajoutez le numéro de grille au. Données pour enregistrer le numéro de grille correspondant.

Exécutez la méthode this.pictureColumnSort ;

Nos photos ont été divisées. Ensuite, passons un moment de passion~

Arrangement d'images 1,5, selon The. la grille sélectionne les voisins les plus appropriés ~

pictureColumnSort() !

L'image ci-dessus

Ce processus est en fait également là n'y a pas grand chose à dire, l'essentiel est de boucler, de vérifier le nombre de grilles de chaque image, de trier les plus adaptées de manière adjacente (exécuter l'étape suivante : fonction goExchange), et enfin d'utiliser une stratégie de grille en 5 points pour celles qui ne peuvent pas correspondre.

Le format peut être sous diverses formes :

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

Comment se fait-il que vous soyez heureux~

Il n'y a rien à dire, il suffit de parcourir le filtrage, de jeter un œil à la photo.

Le désordre 1.6 devient ordonné, il ne devrait pas y avoir de meilleur choix sauf l'échange

goExchange() ! Photo ci-dessus

Regardez le code dans 1.5. Nous exécutons cette fonction chaque fois qu'une image appropriée correspond, car nous devons changer la position de l'image correspondante !
Les RepeatI et RepeatA reçus dans cette fonction sont les index de la double boucle en 1.5. Cet index détermine la position où l'on change d'image.

Le principe montré dans le code est de remplacer l'image correspondante derrière notre image actuelle, puis d'ajouter l'image d'origine derrière elle à la position de l'image remplacée. C'est un peu compliqué, c'est peut-être à cause de mon pauvre. compétences de jeu, Ha ha.

Il n'y a rien à dire sur cette fonction, elle change juste la position.

1.7 Apprenez des forces de chacun et terminez le projet !

setHeight()! L'image ci-dessus

boucle à nouveau (le code devrait encore avoir beaucoup d'améliorations, la boucle est beaucoup utilisée ~) ;

À ce stade, notre page de mise en page est terminée, mais la taille de nos images est en réalité irrégulière, ce qui est insupportable à regarder
Nous lissons donc les différences dans cette fonction et. apprendre des forces de chacun.

En fait, notre image va certainement s'étirer un peu, nous prenons donc également un point médian équilibré pour effectuer un étirement approprié.

Cette fonction peut certainement apporter des restrictions appropriées pour affiner l'ajustement de la taille de l'image. À ce stade, nous avons fini d’écrire toute la logique de commande.

Fait ! Servir ioinc

En ce qui concerne le processus d'appel intermédiaire, je tiens à expliquer une chose :

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

Je n'ai utilisé l'intégralité de l'appel que lorsque j'étais impuissant pendant l'équipe de nuit si je n'ajoute pas l'angle défini. dans la fonction setHeight pour l'ensemble de l'appel, les données auront inexplicablement une erreur lors du changement de position de l'image. Cela a été mal compris jusqu'à présent. Si les experts peuvent voir la solution complète, veuillez la partager.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Comment implémenter les appels entre méthodes dans vue

Comment vux implémente la fonction d'actualisation pull-up

Comment implémenter un carrousel d'images avec jQuery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!