滝の演習

CSS

        * { マージン：0。パディング：0 ;} 
        のLi { リストスタイル：なし ;} 
        #pbl { マージン：0自動。幅：700px ;} 
        UL { 幅：200pxの。フロート：左 ; マージン：0自動 ; マージン右：10pxの ;} 
        IMG { 幅：200pxの。パディングトップ：10pxの ; ボーダー底：1ピクセル固体＃333 ;}

HTML

    < DIV ID = "PBL" > 
        < UL > </ UL > 
        < UL > </ UL > 
        < UL > </ UL > 
    </ DIV >

ジャバスクリプト

    = window.onloadの関数（）{
         VAR oDiv =のdocument.getElementById（ 'PBL' ）;
         VAR OUL = document.getElementsByTagName（ 'UL' ）;
         VAR clientHeight = document.documentElement.clientHeight; // ビジュアル高
        // 見つける分カラム高さの
        関数minHeiht（OUL）{
             VAR HT = OUL [0] .offsetHeight; // 高さを取得し、実際の画像の高さと同じではない、問題があることができる
            VARのインデックス= 0 ;
             のための（VARの I = 0; IはOULを< .LENGTH; Iは++ ）{
                 IF（OUL [I] .offsetHeight < {HT）
                    HT = OUL [I] .offsetHeight。
                    インデックス = I;
                }
            }
            リターン・インデックス。
        }
        滝（）;
        // 画像に、最短素子ULと一致する、minHeightの関数を呼び出し、要素のimgに割り当て、AJAXアレイpubuliu.jsonと内部を削除。
        関数WATERFALL（）{
            AJAX（ '../js/pubuliu.json'、関数（データ）{
                 VARの DATA1 =（新しい機能（ 'リターン' + データ））（）;
                 のため（VAR I = 0; iがdata1.length <; iは++します） {
                     VAR OLI =のdocument.createElement（ 'リー' ）;
                     VAR oImag =のdocument.createElement（ 'IMG' ）。
                    oImag.src = DATA1 [I]。
                    oLi.appendChild（oImag）。
                    OUL [minHeiht（OUL）]のappendChild（OLI）。
                }
            }）
        }
        // スライダが新しいデータで再ロードされ、一定の高さに達すると 
        document.onscroll = 関数（）{
             VARの SH = document.documentElement.scrollTop || document.body.scrollTop;
             IF（clientHeight SH +> =はdocument.firstChild。 * 0.8 scrollHeight）{ // 上部スクロールバーから見える高さに加えて高さ距離は、スクロールバーの全体の高さに等しいよりも大きい場合に、0.8を乗じ、より良いユーザ体験のために、新しいデータがロードされます。
                滝（）
            }
        }
    }
    // パッケージアヤックスは、データを返す
    機能のAjax（URL、FN）{
     VARの？XHR = window.XMLHttpRequest New新しい：XMLHttpRequestを（）新しい新 ; ActiveXObjectを（ 'Microsoft.XMLHTTP'）// Ajaxのつまり互換 
    xhr.open（ 'GET'に、URL、真の）;
    xhr.send（）;
    xhr.onreadystatechange = 関数（）{
         場合（xhr.readyState == 4 && xhr.statusの== 200 ）{
            FN && FN（xhr.responseText）。
        }
    }
}