网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 AJAX实现瀑布流触发分页与分页触发瀑布流的方法
内容
    所谓的瀑布流效果就正如轻图床首页效果那样，多个内容相近的栏目紧密排列，尽量使到栏目间的间隙最小（即流体布局），并且随着页面滚动条向下滚动，新的数据会追加至当前页面的尾部直到所有数据加载完毕（滚动触发的 Ajax 翻页）。
    瀑布流触发分页
    这里说一下思路，虽然下面的实例中不能全都用到：
    1.当进入屏幕时，判断内容是否为空，如果不为空，开始初始化数据。
    2.当往屏幕下拉时，判断数据的最底部与屏幕高度+滚动的高度的大小。如果最底部小于上面两者之和，重新请求接口，即加载数据。
    3.当遇到数据超过某个页数时，停止加载或者用分页的形式显示，点击再显示内容。
    var intf_url="http://jb51.net/intf";
    var pathUrl = "http://jb51.net/";
    var page=1;
    var isLoadRB=false; 
    var ul_select=$("#fansList");
    var btn_more=$("#loading");
    if(ul_select.length <1) return ;
    var is_more =true;
    //跨域请求接口
    function loadjs(src,callback){
     var js= document.createElement('script');
     js.src = src;
     js.onreadystatechange = js.onload =function(){
     if(!js.readyState || js.readyState=='loaded'
      || js.readyState=='complete'){
      if(callback){callback()||callback};
     }
    };
    js.charset="utf-8";
    document.getElementsByTagName('head')[0].appendChild(js);
    }
    //回调函数
    function fill(data){
    if(data.pageCount==data.pageNo){
     is_more=false;//如果数据全部加载完毕，取消加载
        $("#loading").html("加载完毕");
    }
    }
    //解析接口
    function queryIntf(){
    var url=page==1?intf_url+".json":intf_url+"_page"+page+".json";
    loadJs(url,callback);
    }
    function callback(){
    page++;
    }
    /*判断是否要加载接口*/
    function needtoloadRB(){
     var btn_top=btn_more.offset().top;
     var window_height=$(window).height();
     var scroll_Top=$(window).scrollTop();
     return btn_top<scroll_Top+window_height?true:false;
    }
    $(window).scroll(function(){
     var _needload=needtoloadRB();
     if(_needload && isLoadRB==false &&is_more){isLoadRB=true;queryintf();}
    })
    window.onload = function(){
     queryintf(); 
    }
    以上就是比较简单的随着下拉内容不断加载的思路代码。
    JSON格式类似于（如果是动态接口，可以通过callback函数，则这里不用加fill()）：
    fill({"fans":[{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"}],"pageCount":2,"pageNo":1,"pageSize":10,"totalSize":20
    });
    原来静态也可以做接口回调。通过静态处理，则大大缓解了服务器压力和加速生成内容，是大流量网站必备的处理方式。
    jQuery的ajax方法实现分页触发瀑布流
    1.通过 Ajax 的方式获取下一页的内容
    我们需要网页中具有如下 HTML 结构的导航， next_link 为下一页的 url。
    <div id="page_nav">
      <a href="next_link">下一页</a>
    </div>
    相应的 css
    #page_nav {clear: both; text-align: center; }
    以下这段代码为通过 Ajax 的方式获取下一页的内容，并追加到当前内容的末尾。
    nextHref = $("#next_page a").attr("href");
    // 给浏览器窗口绑定 scroll 事件
    $(window).bind("scroll",function(){
      // 判断窗口的滚动条是否接近页面底部
      if( $(document).scrollTop() + $(window).height() > $(document).height() - 10 ) {
        // 判断下一页链接是否为空
        if( nextHref != undefined ) {
          // Ajax 翻页
          $.ajax( {
            url: $("#page_nav a").attr("href"),
            type: "POST",
            success: function(data) {
              result = $(data).find("#thumbs .imgbox");
              nextHref = $(data).find("#page_nav a").attr("href");
              $("#page_nav a").attr("href", nextHref);
              $("#thumbs").append(result);
            }
          });
        } else {
          $("#page_nav").remove();
        }
      }
    });
    2.对追加的内容进行流体布局
    熟悉 jQuery 的童鞋应该会了解 js 对于通过 Ajax 方式插入到页面中的元素并不起作用，但在这里并不需要作出如使用 live() 等处理，因为 Masonry 已经在内部作出类似的处理并且默认起效，因此只需在 Ajax 成功执行后的回调函数中调用 masonry() 方法即可。
    $newElems = $result;
    $newElems.imagesLoaded(function(){
      $container.masonry( 'appended', $newElems, true );
    });
    3.对 Ajax 翻页过程作出修饰
    在上面的过程中已经有完整的瀑布流布局，但是翻页过程中并没有任何提示，而且直接插入多张图片可能会影响用户体验，因此需要对翻页过程作出一些修饰，下面给出完整代码。
    这里需要增加一个如下的元素，用于提示正在加载新内容或提示已到了最后一页。
    <div id="page_loading">
      <span>给力加载中……</span>
    </div>
    相应的 css
    代码如下:
    #page_loading {display: none; background: #111111; opacity: 0.7; height: 60px; width: 220px;  padding: 10px; position: absolute; bottom: -50px; left: 330px; }
    下面是完整的 Ajax 翻页代码
    nextHref = $("#next_page a").attr("href");
    // 给浏览器窗口绑定 scroll 事件
    $(window).bind("scroll",function(){
      // 判断窗口的滚动条是否接近页面底部
      if( $(document).scrollTop() + $(window).height() > $(document).height() - 10 ) {
        // 判断下一页链接是否为空
        if( nextHref != undefined ) {
          // 显示正在加载模块
          $("#page_loading").show("slow");
          // Ajax 翻页
          $.ajax( {
            url: $("#page_nav a").attr("href"),
            type: "POST",
            success: function(data) {
              result = $(data).find("#thumbs .imgbox");
              nextHref = $(data).find("#page_nav a").attr("href");
              $("#page_nav a").attr("href", nextHref);
              $("#thumbs").append(result);
              // 把新的内容设置为透明
              $newElems = result.css({ opacity: 0 });
              $newElems.imagesLoaded(function(){
                $container.masonry( 'appended', $newElems, true );
                // 渐显新的内容
                $newElems.animate({ opacity: 1 });
                // 隐藏正在加载模块
                $("#page_loading").hide("slow");              
              });
            }
          });
        } else {
          $("#page_loading span").text("木有了噢，最后一页了！");
          $("#page_loading").show("fast");
          setTimeout("$('#page_loading').hide()",1000);
          setTimeout("$('#page_loading').remove()",1100);
        }
      }
    });
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/18 11:03:05