ウォーターフォールレイアウト＋ダイナミックレンダリングの実装

var スペース = (wParent - 5 * 幅) / (col - 1);
// wParent は親ボックスの幅、width は子ボックスの幅、col は列数です

<!--ページ コンテナー-->
<div クラス = "コンテナ">
      <!-- 上からの距離を持つすべてのアイテムのコレクション -->
      <div クラス = "items">
             <!--それぞれの小さなブロックには画像とテキストが含まれています-->
              <div クラス = "item">
                    <画像ソース = "" />
                    <p>こんにちは</p>
              </div>

              <div クラス = "item">
                    <画像ソース = "" />
                    <p>こんにちは</p>
              </div>
      </div>
</div>
<div class = "btn">読み込み中...</div>

/*自己呼び出しはクロージャを形成します*/
(関数($){
/*jQueryを追加しない場合は、使用される$はグローバル変数であり、追加後はメンバー変数が使用されます*/

})(jQuery);

/*js/jquery-waterfall.js*/
(関数($){
     $.fn.waterfall = 関数(){
        /*これは現在このメソッドを呼び出している要素セットを参照します (要素セットは jQuery によって取得された疑似配列です)*/
         console.log(これを);
     }
})(jQuery);

(関数($){
    $.fn.waterfall = 関数(){
    // this は現在このメソッドを呼び出している要素セットを参照します // 現在のウォーターフォールの親コンテナー var items = $(this);
        //親コンテナの幅 var wParent = items.width();
        //現在のウォーターフォール サブコンテナ var child = items.children();
        //子コンテナの幅を取得します。var width = child.width();
        //列がいくつあるか想定します var col = 5;
        //間隔を計算します（親要素の幅からすべてのボックスの幅を引いた値 / 4）
        var スペース = (wParent - 列 * 幅) / (列 - 1);

        //各列の高さを記録する配列 var colHeightArr = [];

        //各子要素を走査します$.each(child,function(i,item){
            var $item = $(item);
            var 高さ = $item.height();

            // 位置を設定する // 最初の行の要素はすべて上部にあるため、インデックスは 0 から始まり、5 未満の場合は上部になります if (i < col ) {
                $item.css({
                    上: 0,
                    左:i * (幅 + スペース)  
                });
               //配列に高さを追加します colHeightArr[i] = height;
                //colHeightArr.push(height); も使用できます。
            }
            //その他は最も短い列に従って配置する必要があります});
    }
})(jQuery);

(関数($){
    $.fn.waterfall = 関数(){
    // this は現在このメソッドを呼び出している要素セットを参照します // 現在のウォーターフォールの親コンテナー var items = $(this);
        //親コンテナの幅 var wParent = items.width();
        //現在のウォーターフォール サブコンテナ var child = items.children();
        //子コンテナの幅を取得します。var width = child.width();
        //列がいくつあるか想定します var col = 5;
        //間隔を計算します var space = (wParent - col * width) / (col - 1);

        //各列の高さを記録する配列 var colHeightArr = [];

        //各子要素を走査します$.each(child,function(i,item){
            var $item = $(item);
            var 高さ = $item.height();

            // 配置 // 最初の行の要素はすべて上部にあります // インデックスは 0 から始まり、5 未満の場合はすべて上部にあります if (i < col ) {
                $item.css({
                    上: 0,
                    左:i * (幅 + スペース)
                });

                //colHeightArr[i] = 高さ;
                colHeightArr.push(高さ);
   
             //その他は最短の列に従って並べます}else{    
                // 並べ替える最短の列を見つける// インデックス var index = 0;
                // 最小の高さは最初のインデックスに対応する高さであると仮定します var minHeight = colHeightArr[index];
                //配列を走査して最小値と最小値に対応するインデックスを見つけます //k はインデックス、v は値です $.each(colHeightArr,function(k,v){
                    最小高さがvより大きい場合
                        インデックス = k;
                        最小高さ = v;
                    }
                });

                //$item.css({ を検索します
                    上:最小高さ + スペース、
                    左:インデックス * (幅 + スペース)
                })

                //現在の配列の最小の高さを新しい高さに更新します。colHeightArr[index] = minHeight + space + height;
            }
            //console.log(列の高さArr);
        });

        //親コンテナの高さを設定します。var maxHeight = colHeightArr[0];
        $.each(colHeightArr,function(k,v){
            最大高さ<vの場合{
                最大高さ = v;
            }
        });
        //親コンテナの最大の高さを設定します items.height(maxHeight);
    }
})(jQuery);

$(".items").滝();

/*ページ上のすべてのリソースが読み込まれた後、レイアウトが実行されます。そうしないと、画像のサイズを取得できず、ボックスの高さを拡張できません*/
window.onload = 関数(){
  $(".items").滝();
}

// なぜ jQuery を使わないのでしょうか? このメソッドは DOM 要素がダウンロードされた後に読み込まれるためです。配置する前に、すべてのリソースが読み込まれるまで待つ必要があります。/*   
$(関数(){
	//console.log('dom がロードされました');
});    
*/

<div class="コンテナ">
    <div class="items">
        <!--TODO データをレンダリングする必要がある場所-->
    </div>
    <div class="btn loading">読み込み中...</div>
</div>

$(関数(){
        // 動的なウォーターフォールレンダリングを実現する // レンダリング var render = function(){
            // ページのウォーターフォールレイアウトをレンダリングするためにデータを読み込みます $.ajax({
                タイプ: 'get',
                url:'data.php',
                データ：{
                    //最初のページ page:1,
                    //1ページあたり10項目 pageSize:10
                },
                データ型: 'json',
                成功:関数(データ){
                    コンソールにログ出力します。
                }
            });
        }

        与える（）;
    });

<script type="text/template" id="テンプレート">
    <% for(var i=0; i<items.length; i++){ %>
        <div class="item">
            <img src="<%=items[i].path%>" alt="">
            <p><%=items[i].text%></p>
        </div>
    <% } %>
</スクリプト>

<スクリプト>
  $(関数(){
    //操作する必要があるDOMを取得します
    var $items = $(".items");
    var $btn = $(".btn");
    // レンダリング var render = function(){
        // ページウォーターフォールレイアウトをレンダリングするためにデータを読み込みます $.ajax({
            タイプ: 'get',
            url:'data.php',
            データ：{
                ページ:1,
                ページサイズ:10
            },
            データ型: 'json',
            成功:関数(データ){
                コンソールにログ出力します。
                $items.append(テンプレート('テンプレート',データ));
                //ウォーターフォールレイアウト $items.waterfall();
                //ボタンを変更 $btn.removeClass('loading').html('さらに読み込む');
            }
        });
    }
    
    与える（）;
  });
</スクリプト>

 $(関数(){
    //操作する必要があるDOMを取得します
    var $items = $(".items");
    var $btn = $(".btn");

    // レンダリング var render = function(){
        // ページウォーターフォールレイアウトをレンダリングするためにデータを読み込みます $.ajax({
            タイプ: 'get',
            url:'data.php',
            データ：{
                //次のページのページ番号を取得します。ページ番号がない場合、デフォルトは 1 です。
                ページ:$btn.data("ページ")||1,
                //1ページあたり10項目 pageSize:10
            },
            beforeSend:関数(){
                $btn.addClass("loading").html('読み込み中...');
            },
            データ型: 'json',
            成功:関数(データ){
                コンソールにログ出力します。
                //テンプレートを準備する//追加なのでhtmlは使えません。appendを使う必要があります
                        //データを直接使用する理由は、データが元々配列ではなく、多くの属性を持つオブジェクトだからです。データには長さという 1 つの属性しかないため、配列ではこれは不可能です。$items.append(template('template',data));
                //ウォーターフォールレイアウト $items.waterfall();

                if (データ項目の長さ) {
                    //変更ボタン//データはカスタム属性であり、データから送信されたページはカスタム属性に保存されます。
                    $btn.data("page",data.page).removeClass('loading').html('さらに読み込む');
                }それ以外{
                    //これ以上データはありません//データがなくなったことを確認するには、items 配列の長さがゼロである最後のオブジェクトを開きます$btn.addClass("loading").html("これ以上データはありません");
                }
            }
        });
    }

    //ボタンの読み込み $btn.on('click',function(){
        //複数のAjaxリクエストの送信を避け、判断のみを行い、読み込み状態であれば終了し、
        if($btn.hasClass("ロード中")){
            false を返します。
        }
        与える（）;
    })

    与える（）;
});

 $(関数(){
    //動的なウォーターフォールレンダリングを実現する//操作が必要なDOMを取得する
    var $items = $(".items");
    var $btn = $(".btn");

    // レンダリング var render = function(){
        // ページのウォーターフォールレイアウトをレンダリングするためにデータを読み込みます $.ajax({
            タイプ: 'get',
            url:'data.php',
            データ：{
                ページ:$btn.data("ページ")||1,   
                ページサイズ:10
            },
            beforeSend:関数(){
                $btn.addClass("loading").html('読み込み中...');
            },
            データ型: 'json',
            成功:関数(データ){
                コンソールにログ出力します。
                $items.append(テンプレート('テンプレート',データ));
                //ウォーターフォールレイアウト $items.waterfall();

                //配列にデータがあるかどうかを判断します if(data.items.length){
                 $btn.data("page",data.page).removeClass("loading").html('さらに読み込む');
                }それ以外{
                    $btn.addClass("loading").html("これ以上データはありません");
                }
            }
        });
    }

    //スクロール読み込み $(window).on('scroll',function(){
        // ドキュメントを読み込むには、下端から 200 ピクセル未満である必要があります // 読み込みが完了したら読み込みを続行できます // 項目の高さ var itemsHeight = $items.height();
        // 上からのアイテムのオフセット var itemsTop = $items.offset().top;
        // カール上部からページ全体の距離 var scrollTop = $(document).scrollTop();
        // ブラウザの高さ var winHeight = $(window).height();
        // ブラウザの下部と項目の下部の間の距離 var bottom = itemsHeight + itemsTop - scrollTop -winHeight;
        // ボタンが読み込み状態にあるかどうかを判断します var loading = $btn.hasClass("loading");

        //ボタンが200未満で読み込み状態でない場合は、読み込みを開始します。if(bottom < 200 && !loading){
            与える（）;
        }
    })

    与える（）;
});

//テンプレートエンジンに記述 <img height = "<%=items[i].width * items[i].height / width%>" src = "<%=items[i].path%>" />
/*  
同様に、Ajaxの成功では、$items.append(
    テンプレート('テンプレート',{
        データ:データ、
        幅:幅
    })
);
この方法では幅変数を使用できます。
*/