この記事では、純粋なJSコードを使用して、滝フローのWebページ効果を記述し、最初に基本的な滝フローレイアウトを実装し、下部にスクロールした後にAjaxデータが新しい画像関数をロードすることをシミュレートします。
欠点：
1.プログラムは応答性がなく、ページ幅をリアルタイムで調整することはできません。
2. AJAXシミュレーションデータ画像がプログラムに追加されると、ページ全体のすべての写真が一度再配置されます。
3.プログラムは、写真のサイズを読む前にすべての写真がロードされるのを待ちます。実際、これは間違いなく不可能です。
4。実際のプロジェクトでは、バックグラウンドプログラムは画像サイズの値を指定し、JSコードの画像の幅属性を直接使用する必要があります。
このプログラムのアイデア：
HTML構造：
<body> <div id = "container"> <div> <div> <img src = "img/1.jpg"/> </div> </div> <div> <div> <img src = "img/2.jpg"/> </div> </div> ... </div> </body>
1。レイアウトを初期化します
1. #containerを位置に設定します：相対;
2。フロートするボックスを設定：左;
3。すべての写真を配置して、Webページが読み込まれた後。
3.1画像幅が固定されています。現在のページの各行で収容できる画像の数を計算し、＃containerの幅を取得してから、ページを中央に設定します。
3.2すべての写真をループすると、最初のnum写真のデフォルトのフロートレイアウトは最初の行と同じで、配列boxheightarr = [];
3.3最初の行レイアウトが完了したら、次の画像を配置し、BoxHeightArr []を更新します。
3.3.1次の画像を最初の行（位置：絶対）に最短の画像の下に置きます。つまり、BoxHeightArr []で最小の列に、次の数字のインデックス値を記録します。
3.3.2 BoxHeightArr []（BoxHeightArr [MinIndex]+現在の画像の高さ）の最小値を更新します。
3.4すべての写真が配置されるまで、サイクル3.3ステップを繰り返します
2.新しいデータがロードされるかどうか、スクロール高さのリアルタイム監視
1。初期化が完了したら、上から最後の画像の高さを取得します：lastContentHeight
2。window.onscroll = function（）{...}を使用します
現在のページのスクロール高さのリアルタイム監視は：スクロールトップ
現在のページウィンドウの高さのリアルタイム監視は次のとおりです。
3.ページのモニター：LastContentHeight <Scrolltop + PageHeightの場合、AJAXを使用して、新しく追加された画像のJSONデータを取得します。
3.ページの下部に新しいコンテンツを追加する
1.ループを使用して最初に新しい画像コンテナを作成し、下部に追加し、JSONデータのパスなどの対応する画像データをコンテナに書き込み、画像の追加を完了します。
2。すべての新しい写真が追加された後、ページ全体のすべての写真とレイアウトについて、ステップ1の初期化操作を再実行します。
プロジェクトフォルダー：
index.html：画像データの事前場所
<！Doctype html> <html> <head> <meta charset = "utf-8"> <link rel = "styleSheet" type = "text/css" href = "css/style.css"/> <スクリプトsrc = "js/app.js"> </" <div> <div> <img src = "img/1.jpg"/> </div> </div> <div> <img src = "img/2.jpg"/>> </div> </div> <div> <img src = "img/3.jpg"/>> </div> div> <img> <img> <img> </> <img> </> <img = "img> </div> <div> <img src = "img/4.jpg"/> </div> </div> <div> <img src = "img/5.jpg"/> </div> </div> <div> <img src = "img/5.jpg"/>> </div> div> <img> <img> <img> <im>> <img> fiv> <img> <img> <img> <img> <img> <img> <img> </div> <div> <img src = "img/7.jpg"/> </div> </div> <div> <img src = "img/8.jpg"/> </div> </div> <div> <img src = "img/8.jpg"/>> </div> div> <img> <img> <img> </div> <img> <img> <img> <img> <img> <img>> <img> <img> <img> <img> <img> < </div> <div> <img src = "img/9.jpg"/> </div> </div> <div> <img src = "img/9.jpg"/> </div> </div> <div> </div> </div> <div> <img src="img/1.jpg"/> </div> </div> <div> <img src="img/2.jpg"/> </div> </div> <div> <img src="img/3.jpg"/> </div> </div> <div> <img src="img/4.jpg"/> </div> </div> <div> <img src="img/5.jpg"/> </div> </div> <div> <img src="img/5.jpg"/> </div> </div> <div> <img src="img/6.jpg"/> </div> </div> <div> <img src="img/6.jpg"/> </div> </div> <div> <img src="img/6.jpg"/> </div> </div> <div> <img src="img/6.jpg"/> </div> </div> <div> <img src="img/6.jpg"/> </div> </div> <div> <img src="img/6.jpg"/> </div> </div> </div> <div> <div> <img src = "img/7.jpg"/> </div> </div> <div> <img src = "img/8.jpg"/> </div> </div> <div> <img src = "img/8.jpg"/>> </> </</<im src = "img/9.jpg"/>> </div> </div> <div> <img src = "img/10.jpg"/> </div> </div> <div> <img src = "img/1.jpg"/> </div> </div> <div> div> </</</</</</</</</</</</> src = "img/2.jpg"/> </div> </div> <div> <img src = "img/3.jpg"/> </div> </div> <div> <div> <img src = "img/4.jpg"/>> </div> </div> <div> <img = "img/div> </</</</</</</< src = "img/5.jpg"/> </div> </div> <div> <img src = "img/5.jpg"/> </div> </div> <div> <div> <img src = "img/6.jpg"/> </div> </div> <div> <img = "img/div> </</</</</</< src = "img/8.jpg"/> </div> </div> <div> <img src = "img/8.jpg"/> </div> </div> <div> <div> <div> <img src = "img/9.jpg"/>> </div> </div> <div> div> div> </</</</</</</</</</</< src = "img/9.jpg"/> </div> </div> <div> <div> <img src = "img/9.jpg"/> </div> </div> <div> <div> <img src = "img/10.jpg"/>> </div> div> </body> </html> </div> </html>
style.css：
*{マージン：0;パディング：0;}＃container {position：relative;}。box {padding：5px;フロート：左;}。box_img {padding：5px;ボーダー：1pxソリッド#ccc; Box-Shadow：0 0 5px #ccc; Border-radius：5px;}。box_img img {width：150px;高さ：auto;}app.js：
window.onload = function（）{imglocation（ "container"、 "box"）; // ajaxシミュレーションデータvar imgdata = {"data"：[{"src"： "2.jpg"}、{"src"： "3.jpg"}、{"src"： "4.jpg"}、{"src"： "5.jpg"}、{"src"： "6.jpg" g "}、{" src "：" 2.jpg "}、{" src "：" 3.jpg "}、{" src "：" 4.jpg "}、{" src "：" 5.jpg "}、{" src "：" 6.jpg "}、{jpg}}} window.onscroll = function（）{if（checkflag（））{//新しいデータが下部にロードされるかどうかを判断しますvar cparent = document.getElementbyid（ "container"）; // ajaxデータをページにロードします（var i = 0; i <imgdata.data.length; i ++）{var ccontent = document.createelement（ "div"）; ccontent.classname = "box"; cparent.appendChild（ccontent）; var boximg = document.createelement（ "div"）; boximg.classname = "box_img"; ccontent.appendchild（boximg）; var img = document.createelement（ "img"）; img.src = "img/"+imgdata.data [i] .src; Boximg.AppendChild（IMG）; } // imglocation（ "container"、 "box"）にすべての画像データを再配置します。 }}}; function checkflag（）{var cparent = document.getElementById（ "container"）; var ccontent = getChildElement（cparent、 "box"）; //上から最後の画像の高さを取得し、スクロールの高さ、窓の高さvar lastContentheight = ccontent [ccontent.length-1] .offsettop; var scrolltop = document.documentelement.scrolltop || document.body.scrolltop; var pageheight = document.documentelement.clientheight || document.body.clientheight; console.log（lastContentHeight+"："+scrolltop+"："+pageheight）; if（lastContentHeight <Scrolltop + PageHeight）{return true; }} function imglocation（parent、content）{// var cparent = document.getElementbyId（parent）から親の下のすべてのコンテンツを取得します。 var ccontent = getChildElement（cparent、content）; //現在のブラウザウィンドウの幅に応じて行ごとの画像の数を修正し、それを修正します。 // offsetWidth = width + padding + border var num = math.floor（document.documentelement.clientwidth /imgwidth）; cparent.style.csstext = "width："+imgwidth*num+"px; margin：0 auto"; // alert（ "Pause"）; //アレイを設定して、最初の行の画像情報をホストするように設定var boxheightarr = []; for（var i = 0; i <ccontent.length; i ++）{if（i <num）{//最初の行で画像の高さを記録しますboxheightarr [i] = ccontent [i] .offseetheight; // AJAXデータがロードされると、プログラムはすべての写真を再配置するため、最初の行の画像は位置をクリアする必要があります。 } else {var minheight = math.min.apply（null、boxheightarr）; var minindex = getMinHeightLocation（boxheightarr、minheight）; //最初の行の最小インデックス値の下に画像を置きます。 ccontent [i] .style.top = minheight+"px"; ccontent [i] .style.left = ccontent [minindex] .offsetleft+"px"; //画像が配置されたら、「画像情報の最初の行の最小高さ」を更新します。 }};} //画像の最初の行の最小の高さでインデックス値を取得しますgetminheightlocation（boxheightarr、minheight）{for（var i in boxheightarr）{if（boxheightarr [i] == mineight）{return i; }}} //すべてのboxFunction getChildElement（parent、content）{contentArr = parent.getElementsByClassName（content）; contentArrを返します;}複製画像：
上記はこの記事に関するものです。誰もがJavaScriptプログラミングを学ぶことが役立つことを願っています。