位置: 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联动菜单(织梦的首页怎么换图片)

  • 车船税是否每年都交
  • 企业内部研发支出会计处理探讨
  • 框架合同有合同金额吗
  • 出库单上面的单位写谁的
  • 小企业会计准则没有以前年度损益调整科目
  • 指定扣缴和法定扣缴区别
  • 子公司注销后账务如何处理
  • 电子税务局在哪里看财务报表
  • 支票罚金
  • 销售发票的会计处理
  • 招投标增值税
  • 零税率发票可以冲成本吗
  • 红字发票交税吗
  • 预收款项什么时候确认收入
  • 留抵进项税额可以挂在转出未交增值税吗
  • 筹建期可以有收入吗
  • 积分现金兑换比例怎样计算
  • 旧机器设备出口
  • 私车公用报销怎么算
  • 土地转让应交税费
  • win11隐藏图标怎么弄出来
  • 如何玩faceit
  • 小规模纳税人的增值税怎么算
  • win7上网提速
  • 修改插入点闪烁光标的宽度
  • PHP:mb_strimwidth()的用法_mbstring函数
  • 协调费用应该怎么表述才合理
  • 城建税会计分录怎么写
  • 有形动产融资租赁增值税即征即退政策
  • 公司收入没有进项
  • 苹果macOS 11开发者预览版发布
  • 存货怎么预估
  • 其他应付款的会计科目
  • vue下载安装
  • 分红派息钱去哪里了
  • php测验
  • 银行贴现利息怎么做账务处理
  • 外经证有效期到了,可以续吗
  • 织梦怎么用模板建站
  • 个税的本期收入是什么意思
  • 地方教育附加是非税收入吗
  • 企业开具劳务费发票怎么开,税率多少
  • 座谈会费用报销明细怎么填写
  • seata1.3.0配置
  • 报关单保费率怎么填
  • 小规模代开增值税专用发票怎么操作?
  • 如何确认固定资产的减值
  • 加计抵减和加计扣除是一个意思吗
  • 企业间拆借资金要交印花税吗
  • 高工资的工资
  • 返还垫付征地款
  • 可变现净值是什么意思
  • 行权期行权条件成就什么意思
  • 存储过程的定义及调用方法
  • sqlserver数据库和mysql区别
  • mysql的基础知识
  • mysql8.0 json
  • mysql增删改查面试题
  • mysql5.7.22安装配置教程
  • windows7文件夹选项在哪里
  • mac电脑apple id
  • win10在哪里更改用户名
  • scanserver.exe - scanserver是什么进程 有什么用
  • pcalc是什么软件
  • win 7怎么办
  • javascript中attribute和property的区别详解
  • 纵向导航页面
  • 用python抓取数据
  • unity projector
  • js for循环给数组赋值
  • dropdownlist绑定数据
  • shell脚本 -ne 0
  • python编程术语
  • js的判断类型
  • python如何获取
  • javascript 接口
  • android:fragment
  • cocos creator android
  • 车船税完税凭证去哪里打印
  • 环保税2018年开征文件
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设