この記事では、画像ウォーターフォールフローを実現するためのJSの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。 プロセス: 1. すべての画像を保存するモジュール bigblock を作成します。 <!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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQLでデータテーブルを作成するときにエンジンMyISAM/InnoDBを設定する
隠れる前に:隠れた後: CS: ...コードをコピーコードは次のとおりです。オーバーフロー:非表示;...
初心者は、いくつかの HTML タグを理解することで HTML を学習できます。この入門書は、初心者...
目次1. ウェアハウスを使用してhttpd lrzsz解凍ファイルを作成する2. ソースコードファイ...
序文前回の記事では Hadoop をインストールしましたが、今回は Hbase をインストールします...
フィルター属性は要素の視覚効果を定義しますぼかし画像にガウスぼかしを適用します。 「半径」の値は、ガ...
すべてには基礎が必要です。家を建てるには基礎が必要です。方程式を解くには、まず九九を覚える必要があり...
目次1. axioの基本的な使い方2. クロスドメインの問題を解決するには? 3. パッケージ4. ...
並行処理関数 i の `grep server /etc/hosts | awk '{pri...
最近、Docker とホストが同じネットワーク セグメント上で通信する問題を解決し、そのプロセス全体...
最近、shake.jsを使用して、shakeに似た機能を作成しました。ただし、shake機能はios...
本日のプロジェクト最適化中に、MySQL に問題が発生しました: 定義者として指定されたユーザー (...
SSDストレージを有効にしたMySQLインスタンスの詳細な説明特に OS と MySQL が同じディ...
タイトルXML/HTML コードコンテンツをクリップボードにコピー< h1 >第 1 レ...
目次序文1. wgetを使用して単一のファイルをダウンロードする2. wget -Oを使用してダウン...
MySQL タイム ブラインド インジェクションの 5 つの遅延方法 (PWNHUB の予期しない解...