ionic3でランダムレイアウトのウォーターフォールフローを実装する方法

この記事では、ionic3 の実践的なチュートリアルでのランダム レイアウト ウォーターフォール フローの実装方法を主に紹介します。この記事は、サンプル コードと写真を通じて詳細に紹介しています。必要な方の学習や学習に役立ちます。以下一緒に勉強してください。

はじめに

最近、プロジェクトの必要性から ionic3 に接しましたが、それが本当に優れたツールであることがわかりました。ionic プロジェクトには豊富なアイコン ライブラリが用意されており、これらも ionic3 でアップグレードされています。

会社のプロジェクトの 1 つで、滝の流れの特殊効果が必要でした。長い間探しましたが、関連するリソースが見つかりませんでした。これを行うしかありませんでした~

。写真から始めましょう

この写真を見た生徒はそれが何を意味するのか理解できると思います。そう、滝ですよ！

しかし、今日の滝は普通の滝ではありません。引き続き見てみましょう:

自動レイアウト

私たちの要件は、ランダムで乱雑な雰囲気を作り出すことなので、ページに表示する画像の最適な配置を選択するメカニズムを作成する必要があります。

angular4

画像と隣接する画像の比率が最適であることを確認してから、この効果を実現するのは通常の jq プラグインでは難しいことではないと思います。 、一部の jq プラグインをオンラインで検索することもできます。しかし、私たちの技術スタックは angular4 です~

ng では、DOM 操作は基本的に命令に配置されます。angularjs1.x を使用したことのある学生はよく知っていると思います~、angular4 でも同様です。

それでは、コードを投稿しましょう~

手順を作成します

イオンに関連するコンポーネントがすでに確立されており、画像データがすでにあることを前提としています。関連する根拠がない場合は、クラスメートが提案します。まず、ionic3 と angular4 の概要を見てください。

これは私のコンポーネント HTML ページの 1 つです。おそらく、鋭い観察力を持つ学生は、[imagr-sort]="item" というコマンドを発見したでしょう。はい、このコマンドには現在の画像の角度データが必要です。

コマンド ts

ionic g directive image-sort を作成して、作成したコマンドを実行します。 ionic g directive image-sort执行建立我们的指令。

创建完了我们的自定义指令就是这个样子，空空如也啊~

编写我们的逻辑

1.1接收并且注入一些东西:

看图！

既然我们在模板中有输入([[imagr-sort]="item"]);那么我们也当然应该在指令中接收到输入的数据；如截图中红色箭头所示，我将输入的数据保存了起来->sourceArr;

然后我们在angular4中如果要获取到dom宿主的一些属性了，元素了等等就要用到ElementRef，Renderer2是angular4中的一个类似渲染器的东西吧，这个具体的我还没有搞懂，大家可以多看看这块的资料，我主要是在这个指令中用于更改Dom的一些结构。

关于我们的imgLength ，我待会再说

1.2实际点！图片是从异步加载过来的！

我们首先思考这样一个问题：

我们的指令是在angular数据渲染的时候就开始执行的，这个是基本大家都懂。

but！我们的图片可都是异步加载的呢~，所以自然而然我们要有一个图片加载的过程:

嗯，相信各位早就想到了---->image.onload

カスタム命令を作成したらこれです何もないようですね~🎜🎜🎜🎜ロジックを書く🎜🎜🎜🎜🎜1.1は何かを受け取り、注入します:🎜🎜🎜写真を見てください! 🎜🎜🎜🎜テンプレートに入力しているので([[imagr-sort]="item"]); 次に、スクリーンショットの赤い矢印で示されているように、コマンドで入力データを受け取る必要があります。入力データを保存しました。 sourceArr;🎜🎜その後、angular4 で dom ホスト、要素などの属性を取得したい場合は、ElementRef を使用する必要があります。Renderer2 は angular4 のレンダラのようなものですが、理解できない場合は、これを使用します。詳細については、このコマンドを主に Dom の構造を変更するために使用します。 🎜🎜imgLengthについては後ほどお話します🎜🎜🎜1.2 実践ポイント！画像は非同期で読み込まれます。 🎜🎜🎜まずこの質問について考えてみましょう: 🎜🎜角度データがレンダリングされると命令の実行が開始されます。これは基本的に誰もが理解しています。 🎜🎜でも！画像はすべて非同期で読み込まれますので、当然、画像読み込みプロセスが必要になります:🎜🎜🎜🎜まあ、もう考えたことがあると思います ---->image.onload、はい、以上です~🎜🎜それについて話す時間です以前の imgLength は、完了したイメージの数を記録するために使用され、現在のイメージがロードされているかどうかを識別し、その後のアクションの基礎を提供するために使用されます。 🎜

image.onerror、これは画像のロードに失敗する関数であり、内部で行うことは、元の DOM の angular データからロードに失敗した画像を削除することです。間引き。 image.onerror,这个相信大家也看明白了吧，这个是图片加载失败的一个函数，我在里面做的操作是将加载失败的图片从原始的DOM中，angular的数据剔除。

这里面就用到了我们angular的渲染器this.render2();

相关功能方法大家可以去源码里面看一下，基本上所有常用的Dom操作都有实现。

for循环呢是因为我们的图片数据是多条的，所以我们要等待每一张图片都顺利的加载完成。

ps:注意在onerror与onload的函数中使用this要在imgOnlod中使用变量引用let _self = this;

图片加载完成开始我们的改造工程

1.3将我们的适口按照网格划分

imageStartStort()！

上图

大家看1图红圈内，我是自己划分出五个横向网格标准，便于我们待会将图片比例做对比。

1.4将我们的图片定义网格占用

我们创建了一个数组allImageArr=[];用于保存当前处理过的所有图片的数据。

还记的我们之前获得的angular的数据吧，我们通过循环它来将图片划分网格占用。

我们的循环中都做了些什么？

      1.图片的宽高，并且求出每一张图片的比例。

      2.将获得的图片比列与我们自己定义的网格比例进行区间划分。

      3.按照我们划分的网格来计算出占有网格的图片的新的宽度，所占网格数储存并且记录保存到我们的自定义的allImageArr中，并且在原有的angular数据中添加gridding数字那个记录相应的网格数。

执行this.pictureColumnSort

ここでは angular レンダラ this.render2(); が使用されています

関連する関数とメソッドのソース コードを確認できます。基本的に、一般的に使用されるすべての Dom 操作が実装されています。

for ループは複数の画像データがあるため、各画像が正常にロードされるまで待つ必要があります。

ps:

onerror 関数と onload 関数で this を使用する場合は、imgOnlod let _self = this; <p></p> <span style="color: #ff0000"><p style="text-align: center">画像の読み込みが完了し、改修プロジェクトを開始します<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/008/809465bc9b72810e0dbad820490f8954-10.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="" style="max-width:90%" style="max-width:90%"></p></span><p></p>1.3 グリッドに従ってお好みを分割します<p></p> <p>imageStartStort() ！ </p> <p>上の写真</p> <p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/008/809465bc9b72810e0dbad820490f8954-11.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="" style="max-width:90%" style="max-width:90%"></p> <p>写真 1 の赤い丸を見てください。後で写真の比率を比較できるように、私自身が 5 つの水平グリッド基準を分割しました。 <strong></strong></p>1.4 画像定義グリッドを占有します<p></p> <p style="text-align: center"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/008/809465bc9b72810e0dbad820490f8954-11.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="" style="max-width:90%" style="max-width:90%"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/008/809465bc9b72810e0dbad820490f8954-11.jpg?x-oss-process=image/resize,p_40" class="lazy" alt=""></p> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/008/42ef2f10a5f891a9ffdfdf7fddacb419-9?x-oss-process=image/resize,p_40" class="lazy" alt=""><p><br>現在処理されているすべての画像のデータを保存するために、配列 allImageArr=[]; を作成しました。 </p> <p>前に取得した角度データを思い出してください。画像をループしてグリッドに分割します。 </p> <p>ループでは何をしますか? </p> <p> 1. 画像の幅と高さ、各画像の比率を見つけます。 <strong></strong> 2. 取得した画像比率を独自に定義したグリッド比率で区間に分割します。 </p> <p> 3. 分割したグリッドに従ってグリッドを占める画像の新しい幅を計算し、占有しているグリッドの数を保存してカスタム allImageArr に記録し、元の角度データにグリッドを追加します。数値は対応するグリッド番号を記録します。 </p> <p style="text-align: center"><code>this.pictureColumnSort メソッドを実行します。

写真が分割されました。次に、情熱を持ってみましょう~

1.5 画像の配置、グリッドに従って最適なものを選択します。 ~

pictureColumnSort()!

上の画像

実際、このプロセスについて言うことはあまりありません。主なことは、ループし、各画像のグリッドの数を確認し、最も多いものを並べ替えることです。適切なものを隣接して配置し (次のステップ: goExchange 関数を実行)、最後に一致しないものに対して別の 5 ポイント グリッド戦略を作成します。

🎜 形式は複数にすることができます: 🎜🎜3+2、1+4、1+1。 +3、1+3 +1、2+3.. 。 。 。 。 🎜🎜どうしてそんなに幸せなの〜🎜🎜何も言うことはありません、ただフィルタリングを繰り返して、ただ写真を見てください。 🎜🎜🎜1.6 では、交換 🎜🎜🎜🎜🎜 以外に良い選択肢はないはずです。 上の図 🎜🎜🎜🎜🎜 この関数を実行するたびに、正しい一致が見つかります。画像の後に、一致する画像の位置を変更する必要があるためです。 🎜この関数で受け取ったrepeatIとrepeatAは、1.5の二重ループのインデックスです。このインデックスは、画像を変更する位置を決定します。 🎜🎜 コードに示されている原則は、現在の画像の後ろにある一致した画像を置き換え、その後ろにある元の画像を置き換えた画像の位置に追加することです。少しわかりにくいのですが、私のゲームプレイ能力が低いせいかもしれません（笑）。 。 🎜🎜この機能については何も言うことはなく、ただ位置を変更するだけです。 🎜🎜🎜1.7 お互いの長所を学び、仕事を完成させましょう! 🎜🎜🎜setHeight()! 上の図 🎜🎜🎜🎜🎜 は再びループします (コードにはまだ多くの改善が必要です。ループは頻繁に使用されます~) 🎜🎜 この時点で、レイアウト ページは完成しました。しかし、私たちは実際には写真のサイズが不規則で、見るに耐えられません🎜なので、この機能の違いを滑らかにし、お互いの長所を学びます。 🎜🎜実際、私たちの写真は確実に少し伸びるので、バランスの取れた中間点も取り、適切なストレッチを実行します。 🎜🎜この機能は、画像サイズの調整を調整するためにいくつかの適切な制限を加えることができます。この時点で、命令ロジック全体の作成が完了しました。 🎜🎜ioincサーブ完了🎜🎜🎜🎜

中間呼び出しプロセスに関して、説明したいことが 1 つあります:

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

夜勤でどうしようもないときに呼び出し全体を使用しただけです。呼び出し全体で、データが画像の位置に不可解に表示されます。これまでの誤解、専門家が全体的な解決策を確認できる場合は、共有してください。

上記は私があなたのためにまとめたものです。

関連記事:

vueでメソッド間の呼び出しを実装する方法

vux プルアップリフレッシュ関数を実装する方法

jQueryで画像カルーセルを実装する方法

以上がionic3でランダムレイアウトのウォーターフォールフローを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。