JavaScript は画像を動的にロードするウォーターフォールフローを実装します。-jsチュートリアル-php.cn

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

不言

リリース： 2018-06-25 15:27:01

オリジナル

2505 人が閲覧しました

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

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

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

1. HTML コード

2. CSS コード

<!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 サイトの他の関連記事を参照してください。