位置: IT常识 - 正文

dedecms瀑布流无限加载功能之点击加载(瀑布流样式)

编辑:rootadmin

推荐整理分享dedecms瀑布流无限加载功能之点击加载(瀑布流样式),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:瀑布流js,瀑布流vue,h5瀑布流,div瀑布流,瀑布流vue,瀑布流js,瀑布流vue,div瀑布流,内容如对您有帮助,希望把文章链接给更多的朋友!

自从上次发表了DEDE瀑布流的加载方法后(https://www.bnxb.com/dedecms/26944.html) 有网友反映希望能加个,通过点击加载文章。

其实很简单,只要在之前的基础上再添加一些代码,修改一些参数就行,下面我把有改动的代码贴上,大家可以跟上一篇文章比对一下

dedecms瀑布流无限加载功能之点击加载(瀑布流样式)

下面的这段代码是加了最后一行!

<ul class="yz_xinwen">{dede:arclist row='8' titlelen='50'}&nbsp;&nbsp;&nbsp; <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <div class="viewimg">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <div class="hotimgzz"></div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="[field:arcurl/]" class="zzsz"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="[field:arcurl/]"&nbsp; target="_blank" title="[field:fulltitle/]">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <img src="[field:litpic/]" alt="[field:fulltitle/]" width="250" height="165"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <div class="standpoint">[field:typelink/]</div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <h3><a href="[field:arcurl/]"&nbsp; target="_blank"title="[field:fulltitle/]">[field:title/]</a></h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <p>[field:description/]...</p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span>[field:pubdate function="MyDate('Y-m-d H:i',@me)"/]</span>&nbsp;&nbsp;&nbsp; </li>{/dede:arclist}</ul><divclass="yz_jiazai"><div style="width:100%; float:left;text-align:center; padding: 10px 0px; color:#fff; background:#00aa98;font-size: 16px; cursor:pointer;">加载更多1</div></div>

下面这段代码有几处地方有修改和添加,我先贴出全部的,然后在把修改的代码贴出来

<script type="text/javascript">var loadConfig = {&nbsp;&nbsp;&nbsp; url_api:'/plus/list.php',&nbsp;&nbsp;&nbsp; typeid:{dede:field name="typeid"/},&nbsp;&nbsp;&nbsp; page:2,&nbsp;&nbsp;&nbsp; pagesize:8,&nbsp; //这个就是滑动一次添加几条信息的参数设置&nbsp;&nbsp;&nbsp; loading : 0,}function&nbsp; loadMoreApply(){&nbsp;&nbsp;&nbsp; if(loadConfig.loading == 0){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var typeid = loadConfig.typeid;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var page = loadConfig.page;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var pagesize = loadConfig.pagesize;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var url = loadConfig.url_api,data={ajax:'pullload',typeid:typeid,page:page,pagesize:pagesize};&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var sTop = document.body.scrollTop || document.documentElement.scrollTop, dHeight = $(document).height(), cHeight = document.documentElement.clientHeight;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console.log(dHeight);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (sTop + cHeight >= dHeight-cHeight) {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; loadConfig.loading = 1;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; function ajax(url, data) {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $.ajax({url: url,data: data,async: false,type: 'GET',dataType: 'json',success: function(data) {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; addContent(data);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }});&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ajax(url,data);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp; }}function addContent (rs){&nbsp;&nbsp;&nbsp; if(rs.statu== 1){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var data = rs.list;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var total = rs.total;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var arr=[];&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var length = data.length;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; for(var i=0;i<length;i++){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; arr.push('<li>');&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; arr.push('<div class="viewimg">');&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; arr.push('<div class="hotimgzz"></div>');&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; arr.push('<a href="'+data[i].waparcurl+'" class="zzsz"></a>');&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; arr.push('<a href="'+data[i].waparcurl+'"&nbsp; target="_blank" title="'+data[i].title+'">');&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; arr.push('<img src="'+data[i].picname+'" alt="'+data[i].title+'" width="250" height="165"/>');&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; arr.push('</a>');&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; arr.push('<div class="standpoint"><a href="'+data[i].typeurl+'">'+data[i].typelink+'</a></div>');&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; arr.push('</div>');&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; arr.push('<h3><a href="'+data[i].waparcurl+'"&nbsp; target="_blank" title="'+data[i].title+'">'+data[i].title+'</a></h3>');&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; arr.push('<p>'+data[i].description+'...</p>');&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; arr.push('<span>'+data[i].stime+'</span>');&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; arr.push('</li>');&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $('.yz_xinwen').append(arr.join(''));&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; loadConfig.load_num = rs.load_num;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if((parseInt(total/8)+1) == loadConfig.page){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $('.yz_jiazai').html('<div style="width:100%; float:left; text-align:center; padding: 10px 0px; color:#fff; background:#00aa98; font-size: 16px; cursor:pointer;">加载完成</div>');&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }else{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $('.yz_jiazai').html('<div style="width:100%; float:left; text-align:center; padding: 10px 0px; color:#fff; background:#00aa98; font-size: 16px; cursor:pointer;">点击加载'+loadConfig.page+'</div>');&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if(total<loadConfig.page*loadConfig.pagesize || loadConfig.page > loadConfig.load_num){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; window.removeEventListener('click',loadMoreApply,false);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; loadConfig.page++;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; loadConfig.loading = 0;&nbsp;&nbsp;&nbsp; }}function pullLoad(){&nbsp;&nbsp;&nbsp; window.addEventListener('click', loadMoreApply, false);&nbsp;&nbsp;&nbsp;}pullLoad();</script>

第一处修改的就是pagesize:8, 这个8最好跟上面的row=''这里面的数字同步

pagesize:8, //这个就是滑动一次添加几条信息的参数设置

第二处修改的代码如下

if((parseInt(total/8)+1) == loadConfig.page){&nbsp;&nbsp;&nbsp; $('.yz_jiazai').html('<div style="width:100%; float:left; text-align:center; padding: 10px 0px; color:#fff; background:#00aa98; font-size: 16px; cursor:pointer;">加载完成</div>');}else{&nbsp;&nbsp;&nbsp; $('.yz_jiazai').html('<div style="width:100%; float:left; text-align:center; padding: 10px 0px; color:#fff; background:#00aa98; font-size: 16px; cursor:pointer;">点击加载'+loadConfig.page+'</div>');}

以上就是您们所需要的点击加载功能,样式可以自己调整到想要的样式!

免责

本文链接地址:https://www.jiuchutong.com/zhishi/311919.html 转载请保留说明!

上一篇:python globals函数是什么?(python 函数 global)

下一篇:织梦同一页面调用多个相同的js联动菜单(织梦的首页怎么换图片)

  • 代扣代缴个人所得税会计分录怎么做
  • 进项发票已认证,发现发票有问题怎么办
  • 本年利润怎么结转分录
  • 支付利息现金流量表中什么增加
  • 服务不动产和无形资产扣除项目本期实际扣除金额
  • 企业所得税不预缴年终汇算可以吗
  • 优惠办法
  • 业务招待费的扣除标准是什么2022
  • 企业所得税该如何计算
  • 留抵税额抵减欠税文件
  • 固定资产没收到发票收到实物入账有什么风险
  • 符合营改增应税服务规定的有
  • 企业交补充医疗保险
  • 企业残疾人保障金
  • 人力资源公司差额开票
  • 奖金能否和工资一起发放
  • 增值税发票总金额是含税金额吗
  • 培训费和差旅费可以一起报嘛
  • 酒店长包房正常打几折
  • .exe文件怎么打不开
  • msiexec.exe是什么进程介绍
  • 成本加成定价法包括()
  • 应付账款和应收票据区别
  • 让记事本文件自动删除
  • 天猫积分类服务费账务处理
  • bios是什么请简要介绍一下
  • linux系统安装谷歌浏览器教程
  • 单位保洁外包公司收费标准
  • 质量赔偿款要交税吗
  • 员工报销的费用
  • 使用二氧化碳灭火器时人应该站在什么位置
  • centos下file_put_contents()无法写入文件的原因及解决方法
  • 车辆购置税发票在哪里打印
  • 卷积神经网络CNN实验报告
  • vue2vue3的区别
  • 起征点适用于
  • 会计凭证出现的问题
  • 政府代建项目税收政策
  • 国税退税要多久能到账
  • 个人所得税经营所得
  • 收到专票不认证不抵扣可以吗
  • 高速费发票可以重开吗
  • windows11/windows10专业清理的系统工具Duplicate Cleaner5.0.13中文破解免费下载
  • 应收账款的账务改为公司招待费用怎么做会计分录
  • 企业收到国债专项资金怎么记账
  • sql server基本知识
  • 各种账簿的登记依据和登记方法分别是什么
  • mongodb操作
  • 银行存款为负数可以结账吗
  • 清算时应交税金如何处理
  • 流动资产周转天数高说明什么
  • 用人单位延迟给员工交社保怎么办
  • 公司购买承兑需要交税吗
  • 河道管理费和水利基金
  • 银行退回服务费怎么写分录
  • 受托开发软件一般做什么
  • 进项税加计扣除10%怎么算
  • 上市公司固定资产增加是好事吗
  • 房地产开发企业电费做什么科目
  • 没有期初数据,只要借贷平横,报表是不是就不会不平了?
  • XP系统怎么设置双屏幕
  • winxp系统连接网络
  • shell32.exe - shell32是什么进程 有什么用
  • linux怎么查网络走向
  • win7关闭系统更新在哪里
  • win8应用商店无法使用
  • 安卓接入点
  • jquery 设置和返回元素属性
  • 手机游戏开发工具app
  • perl -i -pe
  • 分离与继承的思想是什么
  • 第三章之一、使用二手设备降低生产成本读后感
  • js获取浏览器当前访问的ip
  • javascript对象主要包括
  • javascrip语言
  • 中心组学习的意义?
  • 地税官网怎么登录
  • 传统服务贸易和新兴服务贸易如何区分
  • 财务报表怎么填写
  • 成都市青羊区国有资产监督管理办公室
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设