var space = (wParent - 5 * width) / (col - 1);
// wParent 父盒子的寬度，width是子盒子的寬度，col是列數(shù)

<!--頁(yè)面容器-->
<div class = "container">
      <!--所有item的集合，距離頂部有距離-->
      <div class = "items">
             <!--每一個(gè)小塊，包含了圖片和文字-->
              <div class = "item">
                    <img src = "" />
                    <p>hello</p>
              </div>

              <div class = "item">
                    <img src = "" />
                    <p>hello</p>
              </div>
      </div>
</div>
<div class = "btn">正在加載...</div>

/*自調(diào)用  形成一個(gè)閉包 */
(function($){
/*如果不加jQuery里面使用的$是全局變量，加了之后使用的就是成員變量*/

})(jQuery);

/*js/jquery-waterfall.js*/
(function($){
     $.fn.waterfall = function(){
        /*this指向的是當(dāng)前調(diào)用這個(gè)方法的元素集（元素集是jquery獲取元素是一個(gè)偽數(shù)組）*/
         console.log(this);
     }
})(jQuery);

(function($){
    $.fn.waterfall = function(){
    // this指向的是當(dāng)前調(diào)用這個(gè)方法的元素集
    // 當(dāng)前的瀑布流父容器
        var items = $(this);
        //父容器的寬度
        var wParent = items.width();
        //當(dāng)前的瀑布流子容器
        var child = items.children();
        //獲取子容器的寬度
        var width = child.width();
        //假設(shè)排多少列
        var col = 5;
        //計(jì)算間距(父元素的寬度減所有盒子的寬度/4)
        var space = (wParent - col * width) / (col - 1);

        //記錄每列高度的數(shù)組
        var colHeightArr = [];

        //遍歷每一個(gè)子元素
        $.each(child,function(i,item){
            var $item = $(item);
            var height = $item.height();

            //設(shè)置定位
            //第一排的元素都是靠頂部的，所以索引從0開始，小于5的時(shí)候都是靠頂部的
            if(i < col ){
                $item.css({
                    top: 0,
                    left:i * (width + space)  
                });
               //把高度添加進(jìn)數(shù)組中
                colHeightArr[i] = height;
                //也可以用   colHeightArr.push(height);
            }
            //其他的都要根據(jù)最矮的一列進(jìn)行排列
        });
    }
})(jQuery);

(function($){
    $.fn.waterfall = function(){
    // this指向的是當(dāng)前調(diào)用這個(gè)方法的元素集
    // 當(dāng)前的瀑布流父容器
        var items = $(this);
        //父容器的寬度
        var wParent = items.width();
        //當(dāng)前的瀑布流子容器
        var child = items.children();
        //獲取子容器的寬度
        var width = child.width();
        //假設(shè)排多少列
        var col = 5;
        //計(jì)算間距
        var space = (wParent - col * width) / (col - 1);

        //記錄每列高度的數(shù)組
        var colHeightArr = [];

        //遍歷每一個(gè)子元素
        $.each(child,function(i,item){
            var $item = $(item);
            var height = $item.height();

            //定位

            //第一排的元素都是靠頂部的

            //索引從0開始，小于5的時(shí)候都是靠頂部的
            if(i < col ){
                $item.css({
                    top: 0,
                    left:i * (width + space)
                });

                //colHeightArr[i] = height;
                colHeightArr.push(height);
   
             //其他的都要根據(jù)最矮的一列進(jìn)行排列
             }else{    
                //找到最矮的那一列進(jìn)行排列
                //索引
                var index = 0;
                //假設(shè)最小的高度是第一個(gè)索引對(duì)應(yīng)的高度
                var minHeight = colHeightArr[index];
                //遍歷數(shù)組，找到最小值和最小值對(duì)應(yīng)的索引
                //k是索引，v是值
                $.each(colHeightArr,function(k,v){
                    if(minHeight > v){
                        index = k;
                        minHeight = v;
                    }
                });

                //定位
                $item.css({
                    top:minHeight + space,
                    left:index * (width + space)
                })

                //當(dāng)前數(shù)組中最小的高度進(jìn)行新的高度的更新
                colHeightArr[index] = minHeight + space + height;
            }
            //console.log(colHeightArr);
        });

        //設(shè)置父容器的高度
        var maxHeight = colHeightArr[0];
        $.each(colHeightArr,function(k,v){
            if(maxHeight < v){
                maxHeight = v;
            }
        });
        //給父容器設(shè)置最高的高度
        items.height(maxHeight);
    }
})(jQuery);

$(".items").waterfall();

/*頁(yè)面上所有的資源都加載完成后進(jìn)行布局，否則獲取不到圖片的尺寸撐不開盒子的高度*/
window.onload = function(){
  $(".items").waterfall();
}

//為什么不用jquery的，因?yàn)檫@個(gè)是在dom元素下載完畢之后進(jìn)行加載這個(gè)方法，需要等所有的資源加載完之后進(jìn)行排列
/*   
$(function(){
	//console.log('dom loaded');
});    
*/

<div class="container">
    <div class="items">
        <!--TODO 需要渲染數(shù)據(jù)的地方-->
    </div>
    <div class="btn loading">正在加載中...</div>
</div>

$(function(){
        //實(shí)現(xiàn)動(dòng)態(tài)的瀑布流渲染
      
        //渲染
        var render = function(){
            // 加載數(shù)據(jù)  渲染頁(yè)面  瀑布流布局
            $.ajax({
                type:'get',
                url:'data.php',
                data:{
                    //第一頁(yè)
                    page:1,
                    //每頁(yè)10條
                    pageSize:10
                },
                dataType:'json',
                success:function(data){
                    console.log(data);
                }
            });
        }

        render();
    });

<script type="text/template" id="template">
    <% for(var i=0 ; i<items.length ; i++){ %>
        <div class="item">
            <img src="<%=items[i].path%>" alt="">
            <p><%=items[i].text%></p>
        </div>
    <% } %>
</script>

<script>
  $(function(){
    //獲取需要操作的dom
    var $items = $(".items");
    var $btn = $(".btn");
    //渲染
    var render = function(){
        // 加載數(shù)據(jù)  渲染頁(yè)面  瀑布流布局
        $.ajax({
            type:'get',
            url:'data.php',
            data:{
                page:1,
                pageSize:10
            },
            dataType:'json',
            success:function(data){
                console.log(data);
                $items.append(template('template',data));
                //瀑布流布局
                $items.waterfall();
                //更改按鈕
                $btn.removeClass('loading').html('加載更多');
            }
        });
    }
    
    render();
  });
</script>

 $(function(){
    //獲取需要操作的dom
    var $items = $(".items");
    var $btn = $(".btn");

    //渲染
    var render = function(){
        // 加載數(shù)據(jù)  渲染頁(yè)面  瀑布流布局
        $.ajax({
            type:'get',
            url:'data.php',
            data:{
                //取下一頁(yè)的頁(yè)碼，沒有的話就默認(rèn)是1
                page:$btn.data("page")||1,
                //每頁(yè)10條
                pageSize:10
            },
            beforeSend:function(){
                $btn.addClass("loading").html('正在加載中...');
            },
            dataType:'json',
            success:function(data){
                console.log(data);
                //準(zhǔn)備模板
                //因?yàn)槭亲芳铀圆荒苡胔tml，要用append
                        //直接用data的原因是因?yàn)閐ata本來就是一個(gè)對(duì)象，里面有很多的屬性，而不是一個(gè)數(shù)組，數(shù)組的話不能這樣，因?yàn)閿?shù)據(jù)只有l(wèi)ength一個(gè)屬性
                $items.append(template('template',data));
                //瀑布流布局
                $items.waterfall();

                if(data.items.length){
                    //更改按鈕
                    //data是一個(gè)自定義屬性,把數(shù)據(jù)中傳輸出來的page保存在自定義屬性當(dāng)中，
                    $btn.data("page",data.page).removeClass('loading').html('加載更多');
                }else{
                    //沒有更多數(shù)據(jù)
                    //判斷什么時(shí)候就沒有數(shù)據(jù)了，打開最后的一個(gè)對(duì)象，里面items的數(shù)組的長(zhǎng)度為零
                    $btn.addClass("loading").html("沒有更多數(shù)據(jù)了");
                }
            }
        });
    }

    //按鈕加載
    $btn.on('click',function(){
        //避免發(fā)送多個(gè)ajax請(qǐng)求，就進(jìn)行判斷，如果是loading狀態(tài)，就退出，
        if($btn.hasClass("loading")){
            return false;
        }
        render();
    })

    render();
});

 $(function(){
    //實(shí)現(xiàn)動(dòng)態(tài)的瀑布流渲染

    //獲取需要操作的dom
    var $items = $(".items");
    var $btn = $(".btn");

    //渲染
    var render = function(){
        // 加載數(shù)據(jù)  渲染頁(yè)面  瀑布流布局
        $.ajax({
            type:'get',
            url:'data.php',
            data:{
                page:$btn.data("page")||1,   
                pageSize:10
            },
            beforeSend:function(){
                $btn.addClass("loading").html('正在加載中...');
            },
            dataType:'json',
            success:function(data){
                console.log(data);
                $items.append(template('template',data));
                //瀑布流布局
                $items.waterfall();

                //判斷數(shù)組中有沒有數(shù)據(jù)
                if(data.items.length){
                 $btn.data("page",data.page).removeClass("loading").html('加載更多');
                }else{
                    $btn.addClass("loading").html("沒有更多數(shù)據(jù)了");
                }
            }
        });
    }

    //滾動(dòng)加載
    $(window).on('scroll',function(){
        //文檔距離底部的距離小于200px 去加載
        //并且加載完成才能繼續(xù)加載

        //items的高度
        var itemsHeight = $items.height();
        //items距離頂部的偏移量
        var itemsTop = $items.offset().top;
        //整個(gè)頁(yè)面距離頂部的卷曲出去的距離
        var scrollTop = $(document).scrollTop();
        // 瀏覽器的高度
        var winHeight = $(window).height();
        //  瀏覽器底部距離items底部的距離
        var bottom = itemsHeight + itemsTop - scrollTop -winHeight;
        //  判斷按鈕是不是loading狀態(tài)
        var loading = $btn.hasClass("loading");

        //如果按鈕小于200 且 不是loading狀態(tài)就開始加載
        if(bottom < 200 && !loading){
            render();
        }
    })

    render();
});

// 模板引擎中寫
<img height = "<%=items[i].width * items[i].height / width%>" src = "<%=items[i].path%>" />
/*  
同樣在ajax的success中
$items.append(
    template('template',{
        data:data,
        width:width
    })
);
這樣width變量就可以使用了。
*/