検索

ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript は画像を動的にロードするウォーターフォール フローを実装します。

JavaScript は画像を動的にロードするウォーターフォール フローを実装します。

不言
不言オリジナル
2018-06-25 15:27:012515ブラウズ

この記事では主に JavaScript で画像を動的にロードしてウォーターフォール フローを実装する原理を詳しく紹介します。興味のある方は参考にしてください。

この記事の例では、JS ウォーターフォール フローの読み込み効果と動的読み込み。具体的な内容は次のとおりです。

マウスが一番下までスクロールすると、画像が動的に読み込まれます。

1. HTML コード

2. CSS コード


3. 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>js实现瀑布流效果-动态加载图片</title>
  <link rel="stylesheet" href="css/waterfallflow.css" type="text/css" />
  <script src="js/waterfallflow.js"></script>
 </head>
 <body>
  <p id="container">
   <p class="box">
    <p class="box_img">
     <img src="img/1.jpg" />
    </p>
   </p>
   <p class="box">
    <p class="box_img">
     <img src="img/2.jpg" />
    </p>
   </p>
   <p class="box">
    <p class="box_img">
     <img src="img/3.jpg" />
    </p>
   </p>
   <p class="box">
    <p class="box_img">
     <img src="img/4.jpg" />
    </p>
   </p>
   <p class="box">
    <p class="box_img">
     <img src="img/5.jpg" />
    </p>
   </p>
   <p class="box">
    <p class="box_img">
     <img src="img/6.jpg" />
    </p>
   </p>
   <p class="box">
    <p class="box_img">
     <img src="img/7.jpg" />
    </p>
   </p>
   <p class="box">
    <p class="box_img">
     <img src="img/3.jpg" />
    </p>
   </p>
   <p class="box">
    <p class="box_img">
     <img src="img/1.jpg" />
    </p>
   </p>
   <p class="box">
    <p class="box_img">
     <img src="img/2.jpg" />
    </p>
   </p>
   <p class="box">
    <p class="box_img">
     <img src="img/1.jpg" />
    </p>
   </p>
   <p class="box">
    <p class="box_img">
     <img src="img/2.jpg" />
    </p>
   </p>
   <p class="box">
    <p class="box_img">
     <img src="img/3.jpg" />
    </p>
   </p>
   <p class="box">
    <p class="box_img">
     <img src="img/4.jpg" />
    </p>
   </p>
   <p class="box">
    <p class="box_img">
     <img src="img/5.jpg" />
    </p>
   </p>
   <p class="box">
    <p class="box_img">
     <img src="img/6.jpg" />
    </p>
   </p>
    
  </p>
 </body>
</html>

上記が全内容ですこの記事が皆さんの学習に役立つことを願っています。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。
関連する推奨事項: 効果を実現するための jQuery および CSS3 折りたたみカード ドロップダウン リスト ボックス

Canvas を使用してグラフィックを描画するための JavaScript


以上がJavaScript は画像を動的にロードするウォーターフォール フローを実装します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：効果を実現するための jQuery および CSS3 折りたたみカード ドロップダウン リスト ボックス次の記事：効果を実現するための jQuery および CSS3 折りたたみカード ドロップダウン リスト ボックス

関連記事

続きを見る