この記事の例では、ウォーターフォールフローレイアウトを実装するためのjsの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。 1. ウォーターフォールフローレイアウトのアイデアを実装する データを準備した後 スクロールイベントをバインドする 2. コード(画像パスを変更した後、直接実行できます) <!DOCTYPE html> <html> <ヘッド> <メタ文字セット="UTF-8"> <title>ドキュメント</title> <スタイル> .cont{マージン: 0 自動;背景: #ccc;位置: 相対;} .cont::after{content: "";display: block;clear: both;} .box{float: 左;padding: 6px;} .imgbox{境界線: 実線 1px 黒;パディング: 6px;境界線の半径: 6px;} .imgbox img{幅: 200px;表示: ブロック;} </スタイル> <script src="data/data.js"></script> <スクリプト> // W1. データを準備する // W2. スクロール イベントをバインドする // W3. ページが下部に到達したかどうかを判断します (スクロール距離 + スクロール領域の高さ == 最後の要素の上部) // W4. 新しいデータを読み込み、新しいページをレンダリングします // W5. ウォーターフォール効果を再実行します onload = function(){ 新しい滝; } クラス Waterfall{ コンストラクタ(){ // 1. 要素を選択する this.box = document.querySelectorAll(".box"); this.cont = document.querySelector(".cont"); ドキュメント要素のクライアント高さを設定します。 this.heightArr = []; // 2. レイアウトを完成させる this.init(); イベントを追加します。 } イベントを追加します(){ var that = this; onscroll = 関数(){ var scrollT = document.documentElement.scrollTop; if (that.clientH + scrollT > that.scrollH - 300) { .render() を使う } } } 与える(){ for(var i=0;i<data.length;i++){ var img = document.createElement("img") データファイル var imgbox = document.createElement("div") imgbox.className = "imgbox"; var ボックス = document.createElement("div") box.className = "ボックス"; imgbox.appendChild(画像); box.appendChild(画像ボックス); this.cont.appendChild(ボックス); } // すべてを初期化します this.box = document.querySelectorAll(".box"); this.heightArr = []; // ウォーターフォール構造を再レンダリングします this.firstLine(); this.otherLine(); } 初期化(){ // 行に収まるセルの最大数を計算し、最大幅を計算します。this.clientW = document.documentElement.clientWidth; this.boxW = this.box[0].offsetWidth; this.maxNum = parseInt(this.clientW / this.boxW) this.cont.style.width = this.boxW * this.maxNum + "px"; // 3. 最初の行を区別する this.firstLine() // 4. 他の行を区別する this.otherLine(); } 最初の行(){ // 5. すべての要素の高さを取得して保存します for(var i=0;i<this.maxNum;i++){ this.heightArr.push(this.box[i].offsetHeight); } } その他の行(){ for(var i=this.maxNum;i<this.box.length;i++){ // 6. 最初の行の高さをすべて取得する // console.log(this.heightArr) // 最小値と最小値のインデックスを計算します // var min = getMin(this.heightArr); // var min = Math.min.apply(null,this.heightArr); var min = Math.min(...this.heightArr); var minIndex = this.heightArr.indexOf(min); // コンソールログ(minIndex); // 7. 要素の位置を設定する this.box[i].style.position = "absolute"; // 8. 要素の上端と左端を設定する this.box[i].style.top = min + "px"; this.box[i].style.left = minIndex * this.boxW + "px"; // 9. 最小値を変更する this.heightArr[minIndex] += this.box[i].offsetHeight; } ドキュメントのスクロールの高さを設定します。 } } 関数 getMin(arr){ // まず配列をインターセプトします(ディープコピー用) // 次に、インターセプトした新しい配列をソートします // 0 番目の位置を検索します // 戻り値 return arr.slice(0).sort((a,b)=>ab)[0]; } </スクリプト> </head> <本文> <div class="cont"> <div class="box"> <div class="imgbox"> <img src="../imgs/4.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="../imgs/2.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="../imgs/3.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="../imgs/5.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="../imgs/1.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="../imgs/6.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="../imgs/7.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="../imgs/8.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="../imgs/9.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="../imgs/10.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="../imgs/4.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="../imgs/2.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="../imgs/3.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="../imgs/5.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="../imgs/1.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="../imgs/6.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="../imgs/7.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="../imgs/8.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="../imgs/9.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="../imgs/10.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="../imgs/4.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="../imgs/2.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="../imgs/3.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="../imgs/5.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="../imgs/1.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="../imgs/6.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="../imgs/7.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="../imgs/8.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="../imgs/9.jpg" alt=""> </div> </div> <div class="box"> <div class="imgbox"> <img src="../imgs/10.jpg" alt=""> </div> </div> </div> </本文> </html> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Dockerfile を使用して Docker でイメージを構築する方法
>>: テーブルの作成、フィールドの追加、フィールドの変更、インデックスの追加によく使用される MySQL の SQL 文の概要
Mysqlが2つのテーブルを関連付けると、次のエラーメッセージが生成されます:照合順序の不正な組み合...
最近、会社で DELL R730 サーバーを購入したのですが、偶然次のチュートリアルを見つけたので、...
仮想化1. 環境セントオス7.3 selinuxとファイアウォールを無効にする2. 仮想化環境の構成...
序文nginx モジュールには、公式とサードパーティの 2 種類があります。nginx のインストー...
1. 公式 Web サイトから MySQL 5.7 インストール パッケージ (mysql-5.7....
バックエンドは thinkphp3.2.3 フレームワークを使用します。他の言語を使用している場合は...
Rational ClearCase は、コードやその他のソフトウェア開発資産のバージョン管理を実...
ウェブページを作り始めたばかりの友人の多くは、拡張子が非常に多いことに気づきます。実際、htm と ...
この記事では、Linux ファイル管理コマンドについて例を挙げて説明します。ご参考までに、詳細は以下...
準備する1. 必要なインストールパッケージをダウンロードするhttps://www.php.net/...
目次背景なぜエラー処理が必要なのでしょうか? async await より適切なエラー処理まとめ要約...
1. MySQLをダウンロードする公式サイトのダウンロードアドレス https://dev.mys...
半透明の境界線結果: 実装コード: <div> 半透明の境界線が見えますか? </...
wangEditor は、JavaScript と CSS に基づいて開発された Web リッチ テ...
ラジオ ボタンや複数選択ボタンにスタイルを追加する方法や、ボタンを大きくする方法を尋ねる人を以前見か...