今日は滝の流れの読み込みエフェクトを学びました。多くのウェブサイトに滝の流れの読み込みエフェクトが用意されています。必要な友達は参考にしてください。JS を使用する方法を紹介します。ウォーターフォール フロー ローディング効果。多くの Web サイトには、同じ幅と異なる高さの複数の商品がページ スクロール バーとして表示されます。下にスクロールすると、このレイアウトはデータ ブロックを読み込み続け、現在の末尾に追加されます。
原理は次のとおりです。1. 行の列数を設定します。
2. 最初の行の各 p の高さを配列に代入します。
3.最小高さのインデックス値
4. 最小高さの p の下の 2 行目に最初の p を配置し、再計算された高さの値を配列に入れて最小高さのインデックス値を再計算します。同様に、複数列レイアウトのウォーターフォール フロー効果を実現します。
6. 最後の p の高さがスクロールされて一番下に表示されている場合は、新しい p を作成して最後の p の後ろに追加します。継続的にループしてローディング効果を実現します。次に、コードが実装されます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
jsコード:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
|
jsビデオチュートリアル 、多くの js オンライン動画チュートリアルが無料で視聴できます。
以上がJS コードを共有してウォーターフォール フロー読み込み画像効果を実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。