ネイティブjsが最も簡単な滝のフローレイアウトを実現します

滝：滝も流れレイアウトとして知られる滝、。より人気のあるWebページのレイアウト、マルチカラムレイアウトの視覚的なパフォーマンスは、ページを下にスクロールするスクロールバーで、この構成は、現在の末尾に添付したデータブロックをロードしていきます、均一である（Baiduの百科事典）

私の理解は：行のレイアウトは、各行が要素、追加起動する最短線の第2行からの要素を追加する~~

この子のような絵何か~~

（ランダムに生成された色、本当に熱い目...）

したがって、この場合は：jsのコードを挿入します。ランダムな高さと色を生成します。

コード：

<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
    <メタ文字セット= "UTF-8">
    <メタ名=「ビューポート」コンテンツ=「幅=装置幅、初期の規模= 1.0」>
    <META HTTP-当量= "X-UA-互換性のある" コンテンツ= "IE =エッジ">
    <タイトル>ドキュメント</ TITLE>
    <スタイル>
    UL、リチウム{
        リスト - スタイル：なし。
        ボックス -sizing：BORDER- ボックス。
    }
    {
        幅：600PX。
        ボーダー：5pxのソリッドシルバー。
        国境 - 半径：8px;
        マージン： 0 自動;
        パディング：15ピクセル;
        表示：フレックス。
    }
    {
        幅：200pxの;高さ：300ピクセル;
        背景 -color：RGB（0、162、255 ）。
        パディング：10pxの;
    }
    それ > のdiv {
        テキスト - 揃える：センター;
        フォント - サイズ：は50px;
        色：白;
    }
    </スタイル>
</ head>の
<身体>
    <UL>
        <LI> </ LI>
        <LI> </ LI>
        <LI> </ LI>
    </ UL>

    <スクリプト>
    // 要素を取得
    するvar一覧= document.querySelectorAll（「UL李」;）
     // 3 div要素を追加するための主要なアレイ線の毎日更新値の要素、3点の高さを代表して、配列を作成、追加
    // HAをとLiを形成します対応関係
    するvar HA = [0,0,0 ]。

    //は、2つの数の間の乱数生成
    関数RN（X、Y）は{
         返す恐らくMath.round（Math.random（）*（Y-X）+ X）を、
    }
    // 対応するリチウムに加えループ要素を作成するために使用される
    ため（VAR ; Iは、10 <I ++はI = 0 ）{
         // 要素が作成
        VAR EL =のdocument.createElement（ "DIVを" ）;
         // ランダム要素の高さ
        のvar H = RN （100,200 ）;
         // ランダム要素の背景色
        VAR BG = "＃" +（Math.random（）+ ""）SUBSTR（2,6-。）;
         // 高さに発生素子、背景色 
        el.style.height = + H "PX" 。
        el.style.backgroundColor = BG;
         // 要素の内容を設定 
        el.innerHTML = I;
        el.style.lineHeight = H + "PX" ;
         // 最短1検索
        するvar分= Math.min（HA [0]、HA、HA [2 [1] ]）;
         VAR minIndex = ha.indexOfを（分）;
         // に対応し、HA標的配列要素を更新するために、リストの現在の要素を追加
        [minIndex] .appendChild（EL）をリストします 。
        HA [Minindeksh] + = H;

    }
    </ SCRIPT>
</ BODY>
</ HTML>

最後~~

ネイティブjsが最も簡単な滝のフローレイアウトを実現します

おすすめ