欢迎来到六久阁织梦模板网!
织梦cms“点击加载更多”、“无限下拉”瀑布流插件

织梦cms“点击加载更多”、“无限下拉”瀑布流插件

浏览次数: 0

作者: 六久阁织梦模板网

信息来源: 六久阁

更新日期: 2018-05-11

文章简介

“点击加载更多” “无限下拉”效果 Infinite Ajax Scroll 简称 ias,无限的ajax滚动,是一款jQuery滚动ajax分页插件,当页面滚动到容器可见部分将自动异步加载数据。 插件的集成很简单,分以下几个步骤: 1、页面中引用jquery.js 与 jquery-ias.min.js scri

  • 正文开始
  • 热门文章

点击加载更多效果

点击加载更多

无限下拉效果

无限下拉效果

Infinite Ajax Scroll  简称 ias,无限的ajax滚动,是一款jQuery滚动ajax分页插件,当页面滚动到容器可见部分将自动异步加载数据。

插件的集成很简单,分以下几个步骤:

1、页面中引用jquery.js jquery-ias.min.js

<script src='http://你的域名/js/jquery.js?ver=1.11.0'></script>

<script src="http://你的域名/js/jquery-ias.min.js?ver=2.2.2"></script>

jquery-ias.min.js与jquery.js            下载链接: http://pan.baidu.com/s/1kVwvjhX                   密码:77oz

注意:jquery.js库版本必须大于1.6

2、接着上面的js,在页面中写入插件参数

<script type="text/javascript">

var ias = $.ias({

    container: ".listbox", //包含所有文章的元素

    item: ".item", //文章元素

    pagination: ".pagelist", //分页元素

    next: ".pagelist a.nextpage", //下一页元素

});

ias.extension(new IASSpinnerExtension({

    src: "/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: !1, //设置此项,如 offset:2 页之后需要手动点击才能加载,offset:!1 则一直为无限加载

}));

ias.extension(new IASNoneLeftExtension({

    text: '已经加载完成!', // 加载完成时的提示

    html: '<p style="text-align: center; cursor: pointer;"><a>{text}</a></p>',

}));

</script>

3dedecms列表模板html代码示范,注意标色的地方要与第2步标色的地方统一

<div class="listbox">

<ul class="e2">

{dede:list pagesize='10'}

<li class="item"><a href="[field:arcurl/]" class="title">[field:title/]</a></li>

{/dede:list}

</ul>

</div>

<ul class="pagelist">

{dede:pagelist listitem="next" listsize="1" runphp=yes}

@me = preg_replace('/<a\shref=([\'"]?).+?\1/', '$0 class="nextpage"', @me);

{/dede:pagelist}

</ul>

完成。

 

要在加载更多后显示的文章中支持图片延迟加载,需要添加此图片延迟加载功能,没有延迟加载图片的童学不需要理会。

ias.on('rendered', function(items) {

    $(".content img").lazyload({

        effect: "fadeIn",

    failure_limit : 10

    }); //这里是你调用Lazyload的代码

})

插件下载说明

未提供下载提取码的插件,都是站长辛苦开发,联系客服或站长有偿获得!

织梦二次开发QQ群

本站客服QQ号:3149518909(点击左边QQ号交流),群号(383578617) DedeCMS织梦教程QQ群 如果您有任何织梦问题,请把问题发到群里,阁主将为您写解决教程!

转载请注明: 织梦模板 » 织梦cms“点击加载更多”、“无限下拉”瀑布流插件

  • 织梦百度小程序及微信小程序万能API接口插件
    阅读
    DEDECMS 小程序插件简介 互联网上有很多织梦插件,但有些依赖于第三方,有些需要某个php或sql基础,有些插件是免费的,但是需要授权只能生成一个模板式的小程序,嵌入的广告多,代码还加密,且小程序的源代码很昂贵,这也是我开发dedecms 小程序插件的一个重...
  • 织梦dedecms批量导入excel表文章内容插件
    阅读
    完装完插件,可以试验导入一下我给你带的那个EXCEL试验数据,导入的方法:模块-织梦Excel数据导入-选取(选取我带的那个Excel试验文件),把Excel测试文件中带的数据导入到你的网站中,这时你就可以到你的栏目中查看你导入的文章了,当需要把文章导入到不同栏目名称时...
  • 织梦dedecms付费可见插件-支持任何类型网站
    阅读
    织梦dedecms付费可见插件介绍 《织梦付费可见插件》是六久阁发布的一款隐藏内容付费阅读插件。通过安装该插件,可以为文章添加隐藏内容,可以设置有权限查看隐藏内容的条件,例如可以设置注册会员才能查看,或者可以设置需付费后才能查看。 使用步骤: 1.请...
  • 织梦一键开启伪静态插件
    阅读
    六久阁发布的一款一键开启伪静态插件,通过该插件可以非常方便的打开织梦伪静态功能,且访问路径与PC版静态地址一致,对SEO更加友好。 页面内容实时更新,无需手动生成html,更加节省时间,彻底解决织梦生成静态页面速度慢,特别是对于文章数量多的网站,每...
  • 织梦tag标签自定义标题、关键词、描述、缩略图静态优化插件(支持手机)
    阅读
    1.织梦tag静态生成。 2.织梦tag的目录自定义,支持数字目录,拼音目录 3.织梦支持自定义TAG的标题,关键词,描述。 5.增加TAG自定义图片,让每个tag页面,都有一个属于自己的图片。 6.增加TAG分类功能,可以按分类,调用不同类别的TAG,让tag前端显示,更...
  • 织梦个人免签支付插件(支付宝秒到、微信隔天腾讯转账)
    阅读
    众所周知,织梦接入支付宝、微信等支付方式都需要企业资质,个人用户无法申请,但很多时候个人网站也需要接入支付。 《织梦个人免签支付插件(支付宝秒到、微信隔天腾讯转账)》是六久阁发布的个人支付宝、微信支付收款插件。具有以下特点: 1、接入支付宝、...
  • 织梦dedecms整合微信小程序助手
    阅读
    插件介绍 《织梦微信小程序助手》是六久阁发布的便于生成微信小程序的插件。 最新版本:1.3 使用该插件可以一键生成属于你自己网站的微信小程序。...
  • 织梦评论留言插件静态版搜索引擎可抓取提升关键词排名
    阅读
    织梦评论插件介绍: 评论插件支持对接织梦会员功能,同步会员头像、会员昵称; 织梦评论插件在前台填入QQ号后,自动获取QQ昵称和QQ头像; 增加评论安全函数,防SQL注入; Jquery优化,减少Jquery体积,以及不必要的调用; 支持回复评论功能,以及对回复的评...
  • 织梦手机端静态页生成插件带自动更新
    阅读
    织梦静态页面的好处多多,既有利于抓取收录而且打开速度也比较快,节省服务器CPU的时间,因此许多大型网站也进行静态化。由于dedecmsv5.7sp2版本没有提供手机端移动端网站静态生成的功能,今天分享一款织梦手机静态页生成插件是一个安装后,可以生成手机版静...
  • 织梦全国多城市分站地区插件带演示源码
    阅读
    织梦做全国多城市分站的优势 无需一个一个绑定域名就可以实现分站功能!根据不同城市显示不同内容,也可以自定义城市进行推广。如果一个全国性的网站已经有了自己知名的品牌,比如赶集网,那么在title中设置品牌的相关关键词肯定是有好处的。比如,一个大连...
收藏此文 打赏本站

如本文对您有帮助,就请六久阁织梦模板网抽根烟吧!

  • 支付宝打赏
    支付宝扫描打赏
    微信打赏
    微信扫描打赏
织梦cms插件图集图片模型整合下载功能 可判断会员金币数会员权限
« 上一篇 2017年07月24日
织梦cms移动版伪静态实现与PC电脑版静态地址url一致教程
下一篇 » 2017年07月07日

精彩评论

有问题在这里提问,阁主会为你解决!
  • 全部评论(0
    还没有评论,快来抢沙发吧!
推荐织梦插件更多
更新时间:2019-12-02

人已经看过了!

更新时间:2018-05-25

人已经看过了!

更新时间:2019-07-30

人已经看过了!

更新时间:2019-06-11

人已经看过了!

更新时间:2017-07-07

人已经看过了!

更新时间:2017-09-04

人已经看过了!

推荐精品模板更多
漂亮清爽的织梦会员中心模板带推广邀请发布文章
更新时间:2017-10-24

人已经看过了!

HTML5高端企业通网站源码中小网络服务类织梦网站模板
更新时间:2017-08-19

人已经看过了!

绿色新闻资讯织梦模板带测试数据
更新时间:2017-08-10

人已经看过了!

房地产房屋建筑建造装修类织梦模板(带手机端)
更新时间:2019-11-11

人已经看过了!

营销型印刷包装打带类企业网站织梦模板(带手机端)
更新时间:2020-04-30

人已经看过了!

蓝色装修工程建设类企业响应式织梦模板
更新时间:2019-11-11

人已经看过了!

木质地板-家具橱柜织梦模板 带手机版
更新时间:2017-08-10

人已经看过了!