この記事の例では、ウォーターフォールフローレイアウトを実装するための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 文の概要
序文nginx モジュールには、公式とサードパーティの 2 種類があります。nginx のインストー...
目次1. 関数の定義1.1 JavaScript の関数1.2 TypeScriptの関数2. オプ...
説明するこの記事では、Vue テクノロジーに基づいて再帰コンポーネントを実装する方法を紹介します。 ...
1. Zabbixバックアップ [root@iZ2zeapnvuohe8p14289u6Z /]# ...
1. ログセグメンテーションのためのLog4j 1) log4j-1.2.17.jar、tomcat...
最近、Apple の記者会見を見てとても興奮したので、Mac システムを体験して Apple の素晴...
目次1. リストインターフェースとその他のモジュールの表示処理2. 従来のインターフェースコンポーネ...
この記事では、ネイティブ JS によって実装された動的読み込みプログレス バーの特殊効果を紹介します...
競合の主な症状は、FLASH ボタンがジャンプし続け、不安定になり、Web ページの外観と通常のアク...
まず解決策を見てみましょう #------------mysql の root ユーザーに権限を付与...
目次序文背景実施計画の考え方js ストレージ機能ソリューション設計やっと要約する序文どの SaaS ...
MySQL は非常に強力なリレーショナル データベースです。しかし、初心者の中には、インストールや設...
——「MySQL in Simple Terms (第 2 版)」からのメモ数値型整数型バイト最小最...
この記事の主な内容は次のとおりです。 1. 閉じるボタン2.キャレット3. フローティングを素早く設...
目次1. セットとは何か2. セットコンストラクタ2.1) 配列2.2) 文字列2.3) 議論2.4...