Implementation of waterfall layout + dynamic rendering

var space = (wParent - 5 * width) / (col - 1);
// wParent is the width of the parent box, width is the width of the child box, col is the number of columns

<!--Page container-->
<div class = "container">
      <!--The collection of all items, with a distance from the top-->
      <div class = "items">
             <!--Each small block contains pictures and text-->
              <div class = "item">
                    <img src = "" />
                    <p>hello</p>
              </div>

              <div class = "item">
                    <img src = "" />
                    <p>hello</p>
              </div>
      </div>
</div>
<div class = "btn">Loading...</div>

/*Self-call forms a closure*/
(function($){
/*If you don't add jQuery, the $ used is a global variable, and after adding it, the member variable is used*/

})(jQuery);

/*js/jquery-waterfall.js*/
(function($){
     $.fn.waterfall = function(){
        /*This refers to the element set that currently calls this method (the element set is a pseudo array obtained by jQuery)*/
         console.log(this);
     }
})(jQuery);

(function($){
    $.fn.waterfall = function(){
    // this refers to the element set that currently calls this method // The current waterfall parent container var items = $(this);
        //Width of parent container var wParent = items.width();
        //Current waterfall subcontainer var child = items.children();
        //Get the width of the child container var width = child.width();
        //Assume how many columns there are var col = 5;
        //Calculate the spacing (parent element width minus all box widths / 4)
        var space = (wParent - col * width) / (col - 1);

        //Array that records the height of each column var colHeightArr = [];

        //Traverse each child element$.each(child,function(i,item){
            var $item = $(item);
            var height = $item.height();

            //Set positioning //The elements in the first row are all at the top, so the index starts from 0, and when it is less than 5, it is at the top if (i < col ) {
                $item.css({
                    top: 0,
                    left:i * (width + space)  
                });
               //Add the height to the array colHeightArr[i] = height;
                //You can also use colHeightArr.push(height);
            }
            //The others should be arranged according to the shortest column});
    }
})(jQuery);

(function($){
    $.fn.waterfall = function(){
    // this refers to the element set that currently calls this method // The current waterfall parent container var items = $(this);
        //Width of parent container var wParent = items.width();
        //Current waterfall subcontainer var child = items.children();
        //Get the width of the child container var width = child.width();
        //Assume how many columns there are var col = 5;
        //Calculate spacing var space = (wParent - col * width) / (col - 1);

        //Array that records the height of each column var colHeightArr = [];

        //Traverse each child element$.each(child,function(i,item){
            var $item = $(item);
            var height = $item.height();

            // Positioning // The elements in the first row are all at the top // The index starts at 0, and when it is less than 5, it is all at the top if (i < col ) {
                $item.css({
                    top: 0,
                    left:i * (width + space)
                });

                //colHeightArr[i] = height;
                colHeightArr.push(height);
   
             //Others should be arranged according to the shortest column}else{    
                //Find the shortest column to sort//index var index = 0;
                //Assume that the minimum height is the height corresponding to the first index var minHeight = colHeightArr[index];
                //Traverse the array and find the minimum value and the index corresponding to the minimum value //k is the index, v is the value $.each(colHeightArr,function(k,v){
                    if(minHeight > v){
                        index = k;
                        minHeight = v;
                    }
                });

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

                //Update the minimum height in the current array to a new height colHeightArr[index] = minHeight + space + height;
            }
            //console.log(colHeightArr);
        });

        //Set the height of the parent container var maxHeight = colHeightArr[0];
        $.each(colHeightArr,function(k,v){
            if(maxHeight < v){
                maxHeight = v;
            }
        });
        //Set the maximum height of the parent container items.height(maxHeight);
    }
})(jQuery);

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

/*After all resources on the page are loaded, layout is performed. Otherwise, the image size cannot be obtained and the height of the box cannot be expanded*/
window.onload = function(){
  $(".items").waterfall();
}

//Why not use jQuery? Because this method is loaded after the DOM element is downloaded. It is necessary to wait until all resources are loaded before arranging them./*   
$(function(){
	//console.log('dom loaded');
});    
*/

<div class="container">
    <div class="items">
        <!--TODO where data needs to be rendered-->
    </div>
    <div class="btn loading">Loading...</div>
</div>

$(function(){
        //Realize dynamic waterfall rendering //Rendering var render = function(){
            // Load data to render the page waterfall layout $.ajax({
                type:'get',
                url:'data.php',
                data:{
                    //The first page page:1,
                    //10 items per page 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(){
    //Get the DOM that needs to be operated
    var $items = $(".items");
    var $btn = $(".btn");
    // Rendering var render = function(){
        // Load data to render the page waterfall layout $.ajax({
            type:'get',
            url:'data.php',
            data:{
                page:1,
                pageSize:10
            },
            dataType:'json',
            success:function(data){
                console.log(data);
                $items.append(template('template',data));
                //Waterfall layout $items.waterfall();
                //Change button $btn.removeClass('loading').html('Load more');
            }
        });
    }
    
    render();
  });
</script>

 $(function(){
    //Get the DOM that needs to be operated
    var $items = $(".items");
    var $btn = $(".btn");

    // Rendering var render = function(){
        // Load data to render the page waterfall layout $.ajax({
            type:'get',
            url:'data.php',
            data:{
                //Get the page number of the next page. If there is no page number, the default is 1.
                page:$btn.data("page")||1,
                //10 items per page pageSize:10
            },
            beforeSend:function(){
                $btn.addClass("loading").html('Loading...');
            },
            dataType:'json',
            success:function(data){
                console.log(data);
                //Prepare template//Because it is appending, you can't use html, you need to use append
                        //The reason for using data directly is that data is originally an object with many attributes, not an array. This is not possible with an array because data only has one attribute, length. $items.append(template('template',data));
                //Waterfall layout $items.waterfall();

                if (data.items.length) {
                    //Change button//data is a custom attribute, the page transmitted from the data is saved in the custom attribute,
                    $btn.data("page",data.page).removeClass('loading').html('Load more');
                }else{
                    //No more data//To determine when there is no more data, open the last object, where the length of the items array is zero$btn.addClass("loading").html("No more data");
                }
            }
        });
    }

    //Button loading $btn.on('click',function(){
        //Avoid sending multiple ajax requests, just make a judgment, if it is in loading state, exit,
        if($btn.hasClass("loading")){
            return false;
        }
        render();
    })

    render();
});

 $(function(){
    //Realize dynamic waterfall rendering//Get the DOM that needs to be operated
    var $items = $(".items");
    var $btn = $(".btn");

    // Rendering var render = function(){
        // Load data to render the page waterfall layout $.ajax({
            type:'get',
            url:'data.php',
            data:{
                page:$btn.data("page")||1,   
                pageSize:10
            },
            beforeSend:function(){
                $btn.addClass("loading").html('Loading...');
            },
            dataType:'json',
            success:function(data){
                console.log(data);
                $items.append(template('template',data));
                //Waterfall layout $items.waterfall();

                //Judge whether there is data in the array if(data.items.length){
                 $btn.data("page",data.page).removeClass("loading").html('Load more');
                }else{
                    $btn.addClass("loading").html("No more data");
                }
            }
        });
    }

    //Scrolling loading $(window).on('scroll',function(){
        //The document must be less than 200px from the bottom to load //and loading can continue after completion //The height of items var itemsHeight = $items.height();
        //The offset of items from the top var itemsTop = $items.offset().top;
        //The distance of the entire page from the top of the curl var scrollTop = $(document).scrollTop();
        // Browser height var winHeight = $(window).height();
        // The distance between the bottom of the browser and the bottom of the items var bottom = itemsHeight + itemsTop - scrollTop -winHeight;
        // Determine if the button is in loading state var loading = $btn.hasClass("loading");

        //If the button is less than 200 and is not in loading state, start loading if(bottom < 200 && !loading){
            render();
        }
    })

    render();
});

//Write in the template engine <img height = "<%=items[i].width * items[i].height / width%>" src = "<%=items[i].path%>" />
/*  
Similarly, in the ajax success, $items.append(
    template('template',{
        data:data,
        width:width
    })
);
This way the width variable can be used.
*/