JSは画像の滝の流れの効果を実現します

JSは画像の滝の流れの効果を実現します

この記事では、画像ウォーターフォールフローを実現するためのJSの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

プロセス:

1. すべての画像を保存するモジュール bigblock を作成します。
2. この大きなモジュールを取得し、小さな画像を保持するためのサブ要素ブロックを追加します。
3. 関数list(n)をカプセル化して50枚の写真を保存し、各写真を空の配列ele[]に追加します。
4. offsetHeight、offsetTop、offsetWidth などの属性を使用して各画像の位置を決定する関数 set_position() をカプセル化し、最大ブロックの動的な高さを設定します。読み込まれる画像の数が増えると、最大ブロックの高さも増加します。
5. window.onload イベントを使用して、画像をより便利に読み込みます。
6. ブラウザのスクロール バーにイベントを追加します。スクロール バーが本体の表示領域の下部から 10 ピクセル上にスライドすると、30 枚の新しい写真が読み込まれ、そのたびにスクロール バーは読み込まれたばかりの写真の位置に留まります。

<!DOCTYPE html>
<html>
<head lang="ja">
    <メタ文字セット="UTF-8">
    <title>写真の滝</title>
    <スタイル>
        *{
            マージン:0;
            パディング:0;
        }
        体{
           /* 背景: #ebebeb;*/
            背景: url(./img/bging2.jpg);
            背景サイズ:100% ;
            高さ:100%;
        }
        .bigblock {
            位置: 相対的;
            幅:650ピクセル;
            最小高さ: 200px;
            背景: #fff;
            マージン:自動;

        }
        .smallblock{
            位置:絶対;
            幅:100ピクセル;
            境界線の半径:5px;
            ボックスの影: 0 0 7px #89c8eb;
            ボックスのサイズ: 境界線ボックス;
            オーバーフロー: 非表示;
        }
        。写真{
            幅:100%;
            垂直位置合わせ: 中央;
        }
    </スタイル>
</head>
<本文>
<div class="bigblock">

</div>
<スクリプト>
    var Big = document.getElementsByClassName("bigblock")[0];
    var ele = [];
    var 数値 = 6;
    var bghight=0;
    var 開始 = 0;
    var image_img=["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "9.jpg", "10.jpg", "11.jpg", "12.jpg", "13.jpg", "14.jpg", "15.jpg", "16.jpg", "17.jpg"];
    (var i=0;i<50;i++){
        リスト();

    }
  関数リスト(n){
      var small = document.createElement("div");
      var image = document.createElement("img");
      small.className="スモールブロック";
      image.className="写真";
      image.src="./img/"+image_img[parseInt(Math.random()* image_img.length)]; //0-12
      ele.push(小さい);
      Big.appendChild(小さい);
      small.appendChild (画像);

  }
   関数set_position(){
     for(var i=start;i<ele.length;i++){
       //各画像の位置を設定します var settop=i <num ? 0: ele[i-num].offsetHeight +10 + ele[i-num].offsetTop;
       ele[i].style.top=settop+"px";
       var setleft = i %num * ele[i].offsetWidth + (i % num) * 10;
       ele[i].style.left=setleft+"px";
         //背景の高さを取得します bghight =(ele[i].offsetHeight +ele[i].offsetTop)>bghight ? ele[i].offsetHeight +ele[i].offsetTop :bghight ;
       Big.style.height =bghight + "px";
     }
   }

   window.onload = 関数(){
       位置を設定します。
       //ブラウザのスクロールバーイベントを追加します。this.addEventListener ("scroll", function() {
          var b_height=document.body.clientHeight;
           if(parseInt (this.pageYOffset + this.innerHeight) > b_height - 10){
              開始 =ele.length;
              (i=0;i<30;i++){
                   リスト();
              }
               位置を設定します。
           }
          // console.log(b_height); // 本体の表示可能な高さ、変数 // console.log(this.pageYOffset); // スクロールバーの上部オフセット // console.log(this.innerHeight); // ブラウザの表示領域の高さ})
   }
</スクリプト>
</本文>
</html> 

画像は動的な画像ではないので効果は見られませんが、コードは正しいので試してみることができます。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • js を使用してウォーターフォール効果を実現する
  • jsはウォーターフォールフローのボトムアウトによるデータの動的ロードを実現します
  • JS を使用して Web ページのウォーターフォール レイアウトを実装する方法
  • ウォーターフォールフローレイアウト(無限読み込み)を実現する js
  • JavaScript でウォーターフォールレイアウトを実装する 3 つの方法
  • JavaScript ウォーターフォールフローを実装する方法を学びましたか?

<<:  MySQLでデータテーブルを作成するときにエンジンMyISAM/InnoDBを設定する

>>:  ウェブメッセージボード機能を実現するjs

推薦する

div が隠しテキストを超え、div 部分の向こうの CSS コードを隠します

隠れる前に:隠れた後: CS: ...コードをコピーコードは次のとおりです。オーバーフロー:非表示;...

初心者がHTMLタグを学ぶ(1)

初心者は、いくつかの HTML タグを理解することで HTML を学習できます。この入門書は、初心者...

Linux の操作とメンテナンスの基本 httpd 静的 Web ページ チュートリアル

目次1. ウェアハウスを使用してhttpd lrzsz解凍ファイルを作成する2. ソースコードファイ...

Vmware + Ubuntu18.04 に Hbase 2.3.5 をインストールするための詳細なチュートリアル

序文前回の記事では Hadoop をインストールしましたが、今回は Hbase をインストールします...

CSS でのフィルタープロパティの使用に関する詳細な説明

フィルター属性は要素の視覚効果を定義しますぼかし画像にガウスぼかしを適用します。 「半径」の値は、ガ...

ウェブデザインのグラフィック構成と組版機能の紹介

すべてには基礎が必要です。家を建てるには基礎が必要です。方程式を解くには、まず九九を覚える必要があり...

vue3 学習ノートにおける axios の使用の変更の概要

目次1. axioの基本的な使い方2. クロスドメインの問題を解決するには? 3. パッケージ4. ...

Linuxの同時実行は簡単です。このようにするだけです

並行処理関数 i の `grep server /etc/hosts | awk '{pri...

Dockerは同じIPネットワークセグメントとの接続を実現する

最近、Docker とホストが同じネットワーク セグメント上で通信する問題を解決し、そのプロセス全体...

Vue はシェイク機能を実装します (ios13.3 以降と互換性があります)

最近、shake.jsを使用して、shakeに似た機能を作成しました。ただし、shake機能はios...

Mysql: 定義者として指定されたユーザー ('xxx@'%') が存在しません 解決策

本日のプロジェクト最適化中に、MySQL に問題が発生しました: 定義者として指定されたユーザー (...

SSDストレージを有効にしたMySQLインスタンスの詳細な説明

SSDストレージを有効にしたMySQLインスタンスの詳細な説明特に OS と MySQL が同じディ...

HTML のタイトル、段落、改行、水平線、特殊文字についての簡単な説明

タイトルXML/HTML コードコンテンツをクリップボードにコピー< h1 >第 1 レ...

Linux での wget コマンドの基本的な使い方

目次序文1. wgetを使用して単一のファイルをダウンロードする2. wget -Oを使用してダウン...

MySQL タイムブラインドインジェクションの 5 つの遅延方法

MySQL タイム ブラインド インジェクションの 5 つの遅延方法 (PWNHUB の予期しない解...