欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  php教程

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

程序员文章站 2022-03-17 16:55:34
...

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

下拉滚动条或鼠标滚轮滚动到页面底部时, 动态即时加载新内容。

后台用 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 = $('
jQuery向下滚动即时加载内容实现的瀑布流效果,jquery向下滚动
'+oProduct.title+'
').hide(); $row.append($item); $item.fadeIn(); } } } }); }

下面再给大家分享一段代码:PHP Jquery和ajax相结合实现下拉淡出瀑布流效果

我的风格,废话不多说,感兴趣的朋友直接看下文代码:

前台:


$category=$this->getMyVal('category',$_GET);
$xiaohuaList=Xiaohua::model()->getXiaohao($category); //打开页面默认显示的数据
?>

id;?>
title);?>
content;?>
分享