找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 959|回复: 0
打印 上一主题 下一主题

jQuery向下滚动即时加载内容实现的瀑布流效果

[复制链接]

2487

主题

2487

帖子

7391

积分

论坛元老

Rank: 8Rank: 8

积分
7391
跳转到指定楼层
楼主
发表于 2018-2-14 05:39:50 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

            下拉滚动条或鼠标滚轮滚动到页面底部时, 动态即时加载新内容。
后台用 json 传输数据, 示例程序中只写了示例数组。数据也只设置了两个属性, 需根据实际应用改写。
页面用了 ul li 做为容器, 每个 li 表示一列



  • PHP和Jquery和ajax实现下拉淡出瀑布流效果(无需插件)


  • JS代码
    /*
    @版本日期: 版本日期: 2012年4月11日
    @著作权所有: 1024 intelligence ( http://www.1024i.com )
    获得使用本类库的许可, 您必须保留著作权声明信息.
    报告漏洞,意见或建议, 请联系 Lou Barnes(iua1024@gmail.com)
    */
    $(document).ready(function(){
    loadMore();
    });
    $(window).scroll(function(){
    // 当滚动到最底部以上100像素时, 加载新内容
    if ($(document).height() - $(this).scrollTop() - $(this).height()iTempHeight)
          {
           iHeight = iTempHeight;
           $row = $(this);
          }
         });
         $item = $('

    '+oProduct.title+'').hide();
         $row.append($item);
         $item.fadeIn();
        }
       }
      }
    });
    }
    下面再给大家分享一段代码:PHP Jquery和ajax相结合实现下拉淡出瀑布流效果
    我的风格,废话不多说,感兴趣的朋友直接看下文代码:
    前台:
    getMyVal('category',$_GET);
    $xiaohuaList=Xiaohua::model()->getXiaohao($category); //打开页面默认显示的数据
    ?>
    id;?>
    ">title);?>
    ">content;?>
    );" class="fx cursor_p" data-id="">分享

    后台:
    public function actionListXiaohua() {
    $xiaohuaList=Xiaohua::model()->getXiaohua();//获取笑话信息
    echo CJSON::encode($xiaohuaList);
    }
    js:
    ;(function($){
    var
    //参数
    setting={
    column_width:240,//列宽
    column_className:'waterfall_column',//列的类名
    column_space:2,//列间距
    cell_selector:'.cell',//要排列的砖块的选择器,context为整个外部容器
    'img',//要加载的图片的选择器
    auto_,//是否需要自动计算图片的高度
    fadein:true,//是否渐显载入
    fadein_speed:600,//渐显速率,单位毫秒
    insert_type:1, //单元格插入方式,1为插入最短那列,2为按序轮流插入
    getResource:function(index){ } //获取动态资源函数,必须返回一个砖块元素集合,传入参数为加载的次数
    },
    //
    waterfall=$.waterfall={},//对外信息对象
    $waterfall=null;//容器
    waterfall.load_index=0, //加载次数
    $.fn.extend({
    waterfall:function(opt){
    opt=opt||{};
    setting=$.extend(setting,opt);
    $waterfall=waterfall.$waterfall=$(this);
    waterfall.$columns=creatColumn();
    render($(this).find(setting.cell_selector).detach(),false); //重排已存在元素时强制不渐显
    waterfall._scrollTimer2=null;
    $(window).bind('scroll',function(){
    clearTimeout(waterfall._scrollTimer2);
    waterfall._scrollTimer2=setTimeout(onScroll,300);
    });
    waterfall._scrollTimer3=null;
    $(window).bind('resize',function(){
    clearTimeout(waterfall._scrollTimer3);
    waterfall._scrollTimer3=setTimeout(onResize,300);
    });
    }
    });
    function creatColumn(){//创建列
    waterfall.column_num=calculateColumns();//列数
    //循环创建列
    var html='';
    for(var i=0;i';
    }
    $waterfall.prepend(html);//插入列
    return $('.'+setting.column_className,$waterfall);//列集合
    }
    function calculateColumns(){//计算需要的列数
    var num=Math.floor(($waterfall.innerWidth())/(setting.column_width+setting.column_space));
    if(num0){//本身是图片或含有图片
    var image=new Image;
    var src=$(this)[0].nodeName.toLowerCase()=='img'?$(this).attr('src')(this).find(setting.).attr('src');
    image.onload=function(){//图片加载后才能自动计算出尺寸
    image.onreadystatechange=null;
    if(setting.insert_type==1){
    insert($(elements).eq(i),setting.fadein&&fadein);//插入元素
    }else if(setting.insert_type==2){
    insert2($(elements).eq(i),i,setting.fadein&&fadein);//插入元素
    }
    image=null;
    }
    image.onreadystatechange=function(){//处理IE等浏览器的缓存问题:图片缓存后不会再触发onload事件
    if(image.readyState == "complete"){
    image.onload=null;
    if(setting.insert_type==1){
    insert($(elements).eq(i),setting.fadein&&fadein);//插入元素
    }else if(setting.insert_type==2){
    insert2($(elements).eq(i),i,setting.fadein&&fadein);//插入元素
    }
    image=null;
    }
    }
    image.src=src;
    }else{//不用考虑图片加载
    if(setting.insert_type==1){
    insert($(elements).eq(i),setting.fadein&&fadein);//插入元素
    }else if(setting.insert_type==2){
    insert2($(elements).eq(i),i,setting.fadein&&fadein);//插入元素
    }
    }
    });
    }
    function public_render(elems){//ajax得到元素的渲染接口
    render(elems,true);
    }
    function insert($element,fadein){//把元素插入最短列
    if(fadein){//渐显
    $element.css('opacity',0).appendTo(waterfall.$columns.eq(calculateLowest())).fadeTo(setting.fadein_speed,1);
    }else{//不渐显
    $element.appendTo(waterfall.$columns.eq(calculateLowest()));
    }
    }
    function insert2($element,i,fadein){//按序轮流插入元素
    if(fadein){//渐显
    $element.css('opacity',0).appendTo(waterfall.$columns.eq(i%waterfall.column_num)).fadeTo(setting.fadein_speed,1);
    }else{//不渐显
    $element.appendTo(waterfall.$columns.eq(i%waterfall.column_num));
    }
    }
    function calculateLowest(){//计算最短的那列的索引
    var min=waterfall.$columns.eq(0).outerHeight(),min_key=0;
    waterfall.$columns.each(function(i){
    if($(this).outerHeight()=bottom-windowHeight){
    render(getElements(),true);
    }
    },100);
    }
    function onResize(){//窗口缩放时重新排列
    if(calculateColumns()==waterfall.column_num) return; //列数未改变,不需要重排
    var $cells=waterfall.$waterfall.find(setting.cell_selector);
    waterfall.$columns.remove();
    waterfall.$columns=creatColumn();
    render($cells,false); //重排已有元素时强制不渐显
    }
    })(jQuery);
    以上代码分为两部分给大家介绍了PHP和Jquery和ajax实现下拉淡出瀑布流效果,代码比较简单,附有注释,如有bug欢迎提出,脚本之家小编会在第一时间和大家联系的。谢谢!
                
                
    您可能感兴趣的文章:
  • jquery简单瀑布流实现原理及ie8下测试代码
  • jQuery瀑布流插件Wookmark使用实例
  • jQuery.lazyload+masonry改良图片瀑布流代码
  • jQuery Masonry瀑布流插件使用详解
  • jQuery实现瀑布流布局
  • Jquery实现瀑布流布局(备有详细注释)
  • jQuery+HTML5美女瀑布流布局实现方法
  • jQuery实现瀑布流布局详解(PC和移动端)
  • PHP结合Jquery和ajax实现瀑布流特效
  • 深入探秘jquery瀑布流的实现
  • jQuery实现的瀑布流加载效果示例
            
  • 分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
    收藏收藏
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    用户反馈
    客户端