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>