jQuery ajax瀑布流加载静态的列表页面

1.加载一行数据

<script>
  //滚动加载事件
  var Loadurl = "{$url}";
  if(window.location.href !== Loadurl){
    window.location.href = Loadurl;
  }
  var pageTotal = "{ceil(min($total,$mintotal)/$pagesize)}";
  //  异步加载
  ;(function($) {
      var LoadContainer   = "#list-ul-data-more";  //数据存放的容器ID
      var Loading   = "#spinnerIcn";//加载标志所在的容器CLASS
      var pagenum   = 1;    //加载的页码,默认已经加载完第一页.
      var isLoad      = true;   //是否在加载数据当中,是true,否false
      $(window).on("resize scroll",function () {
          var doc_T     = $(document).scrollTop();
          var win_H       = $(window).height();
          var loadTop = $(Loading).offset().top + $(Loading).children().height();
          if(loadTop<= doc_T+win_H && isLoad && pagenum < pageTotal){
            loadData();
          }
          
      });
      function loadData(){
        isLoad = false;
        pagenum++;
        var url = Loadurl+pagenum+".shtml";
        $.ajax({
            url     : url,
            async   : true,
            type    : 'get',
            datatype: 'html',
            success : function (html)
            {
              var start_data = html.indexOf('<span id="start-data-'+pagenum+'"></span>');
              var stop_data = html.indexOf('<span id="stop-data-'+pagenum+'"></span>');
              var LoadHtml = html.substring(start_data,stop_data)+'<span id="stop-data-'+pagenum+'"></span>';
              $(LoadContainer).append(LoadHtml);
            },
            complete : function ()
            {
                isLoad  = true;
                if(pagenum >= pageTotal){
                  //设置正在加载标识
                  $("#spinnerIcn").hide();
                }

            }
        });
      }
  })(jQuery);
</script>

 2.三列数据，从最小的开始加载

 

    <script>
      //滚动加载事件
      var Loadurl = encodeURI("{$url}");
      if(window.location.href !== Loadurl){
        window.location.href = Loadurl;
      }
      var pageTotal = "{ceil(min($total,$mintotal)/$pagesize)}";
      //  异步加载
      ;(function($) {
          var LoadContainer   = "#list-ul-data-more";  //数据存放的容器ID
          var Loading   = "#spinnerIcn";//加载标志所在的容器CLASS
          var pagenum   = 1;    //加载的页码,默认已经加载完第一页.
          var isLoad      = true;   //是否在加载数据当中,是true,否false
          $(window).on("resize scroll",function () {
              var doc_T     = $(document).scrollTop();
              var win_H       = $(window).height();
              var loadTop = $(Loading).offset().top + $(Loading).scrollTop() + $(Loading).height();
              if(loadTop <= doc_T+win_H && isLoad && pagenum < pageTotal){
                loadData();
              }
              
          });

          function loadData(){
            isLoad = false;
            pagenum++;
            var url = Loadurl+pagenum+".shtml";
            $.ajax({
                url     : url,
                async   : true,
                type    : 'get',
                datatype: 'html',
                success : function (html)
                {
                  var start_data = html.indexOf('<span id="start-data-'+pagenum+'"></span>');
                  var stop_data = html.indexOf('<span id="stop-data-'+pagenum+'"></span>');
                  var LoadHtml = html.substring(start_data,stop_data)+'<span id="stop-data-'+pagenum+'"></span>';
                  $(LoadHtml).find('.three-col-item').each(function(i,v){
                    var li_html = $(v)[0].outerHTML;
                    var height = 0;
                    var ladElement = '';
                    $.each($('.col-md-4.three-col-wrap'),function(i,v){
                      if(i == 0){
                        height = $(this).height();
                        ladElement = $(this);
                      }else if(i > 0 && height > 0 && height > $(this).height()){
                        height = $(this).height();
                        ladElement = $(this);
                      }
                    });
                    ladElement.append(li_html);          
                  });

                },
                complete : function ()
                {
                    isLoad  = true;
                    if(pagenum >= pageTotal){
                      //设置正在加载标识
                      $("#spinnerIcn").hide();
                    }

                }
            });
          }
      })(jQuery);
    </script>

 

 

 

...

...

 

 

 

...

...