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