迅睿CMS:通过前端jq插件 infinite-scroll 实现ajax瀑布流加载_迅睿教程_老K模板网

迅睿CMS:通过前端jq插件 infinite-scroll 实现ajax瀑布流加载

迅睿教程 2024-10-22 14:15:08 0次 0 来源：老K模板网收藏

ajax瀑布流加载方案有两种一种是官方提供的

https://www.xunruicms.com/doc/534.html

另外一种便是通过我这种前端 jq插件实现的下面说方法

列表的调用案例

下载 jq插件 infinite-scroll （在下面附件下载）代码放在list循环之后

<script src="/static/default/ajax/js/jquery-ias.min.js" type="text/javascript"></script>     
    
<script type="text/javascript">     
var ias = $.ias({    
	container: ".listbox", //包含所有文章的元素    
	item: ".item", //对应的每篇文章元素    
	pagination: ".pagelist", //对应下面的分页元素    
	next: " .pagelist a[rel^=next] ", //下一页元素        
	//分页里面 下一页带了 rel="next" 所以这个是获取.pagelist类下面的rel元素next的    
});    
ias.extension(new IASSpinnerExtension({    
	src: "/static/default/ajax/img/load.gif",    
	html: '<p style="text-align: center;"><img src="{src}"/></p>'    
}));    
ias.extension(new IASTriggerExtension({    
	text: '点击加载更多', //此选项为需要点击时的文字    
	html: '<p style="text-align: center; cursor: pointer;"><a>{text}</a></p>',    
	offset: 2, //设置此项后，到 offset:2 页之后需要手动点击才能加载，offset:!1 则一直为无限加载    
}));    
ias.extension(new IASNoneLeftExtension({    
	text: '已经加载完成！', // 加载完成时的提示    
	html: '<p style="text-align: center; cursor: pointer;"><a>{text}</a></p>',    
}));    
</script>

至此已经完成案例请查看 http://poscms4.ew98.com/wenzhang

代码下载也可以自行百度下载

免责声明：1.凡本站注明“来源：XXX（非老K模板网）”的作品，均转载自其它媒体，所载的文章、图片、音频视频文件等资料的版权归版权所有人所有，如有侵权，请联系laokcms#126.com处理；2.凡本站转载内容仅代表作者本人观点，与老K模板网无关。

相关文档

迅睿CMS:通过前端jq插件 infinite-scroll 实...

上一篇：迅睿CMS:当前模板属于哪种页面

下一篇：迅睿CMS:在模板中读取本模板有哪些可以使用的变量

0 条评论

网友留言

搜索帮助

更多

人气文章

关注我们

扫描二维码关注我们

高端网页主题模板产品提供商，覆盖各大开源系统主题，一站式在线选购高品质主题模板，助力您的网站从芸芸同行业的网站中脱颖而出。

Copyright © 2025 © 老K模板网 ✪ 版权所有赣ICP备20009342号
 网站地图 TXT地图 TAG标签
关于我们

老K模板网

商务合作

留言反馈

举报投诉
常见问题

如何注册

怎么购买

支付方式

发货方式
扫一扫手机访问

老K模板 LaoKcms 域名注册购买迅睿模板足球直播模板 +申请友链