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

  • opporeno7息屏显示时间怎么设置(oppo r17灭屏显示)

    opporeno7息屏显示时间怎么设置(oppo r17灭屏显示)

  • wps序号怎么自动填充排序(wps序号怎么自动递增不了)

    wps序号怎么自动填充排序(wps序号怎么自动递增不了)

  • 验证电子邮件的验证码是发到哪里(验证电子邮件的验证码怎么验证)

    验证电子邮件的验证码是发到哪里(验证电子邮件的验证码怎么验证)

  • 金山毒霸怎么卸载不了(金山毒霸怎么卸载不掉win7)

    金山毒霸怎么卸载不了(金山毒霸怎么卸载不掉win7)

  • 保护模式禁用是什么意思(怎样去掉保护模式禁用)

    保护模式禁用是什么意思(怎样去掉保护模式禁用)

  • plc软件有哪些(plc软件有哪几种)

    plc软件有哪些(plc软件有哪几种)

  • qq打开黑屏怎么办(qq黑屏了)

    qq打开黑屏怎么办(qq黑屏了)

  • 苹果se基带是高通的吗(iphone se2 基带)

    苹果se基带是高通的吗(iphone se2 基带)

  • qq的聊天记录可以保存多久(qq的聊天记录可以作为证据吗)

    qq的聊天记录可以保存多久(qq的聊天记录可以作为证据吗)

  • wps企业版和个人版有什么区别(wps企业版和个人版能共存?)

    wps企业版和个人版有什么区别(wps企业版和个人版能共存?)

  • 网易云歌单播放次数是指别人么(网易云歌单播放次数怎么增加)

    网易云歌单播放次数是指别人么(网易云歌单播放次数怎么增加)

  • 电脑息屏了还可以下载东西吗

    电脑息屏了还可以下载东西吗

  • nex3s和nex3区别(nex3跟nex3s有什么区别)

    nex3s和nex3区别(nex3跟nex3s有什么区别)

  • 苹果手表后面绿灯怎么关(苹果手表后面绿灯)

    苹果手表后面绿灯怎么关(苹果手表后面绿灯)

  • iphone已激活是什么意思(已激活苹果是什么意思)

    iphone已激活是什么意思(已激活苹果是什么意思)

  • vivov1816a是什么型号(vivov1838a是什么意思)

    vivov1816a是什么型号(vivov1838a是什么意思)

  • word所有数字统一字体(word所有数字统一突显字体)

    word所有数字统一字体(word所有数字统一突显字体)

  • 江高是哪个省的城市(江高什么意思)

    江高是哪个省的城市(江高什么意思)

  • 苹果11抬头灯怎么开启(苹果抬头灯怎么弄)

    苹果11抬头灯怎么开启(苹果抬头灯怎么弄)

  • 淘宝直播皇冠怎么来的(淘宝直播皇冠是什么意思)

    淘宝直播皇冠怎么来的(淘宝直播皇冠是什么意思)

  • 新卡在哪输入imsi码(手机卡在哪里输入imsi)

    新卡在哪输入imsi码(手机卡在哪里输入imsi)

  • 什么叫数字化技术(什么叫数字化技术的应用)

    什么叫数字化技术(什么叫数字化技术的应用)

  • 美版苹果手机怎么下软件(美版苹果手机怎么样)

    美版苹果手机怎么下软件(美版苹果手机怎么样)

  • iphonex有多长厘米(iphone x有几厘米)

    iphonex有多长厘米(iphone x有几厘米)

  • H5网站建设有哪些优势(h5网站有什么优势)

    H5网站建设有哪些优势(h5网站有什么优势)

  • 苹果手机突然要激活是怎么回事(苹果手机突然要求输入ID密码)

    苹果手机突然要激活是怎么回事(苹果手机突然要求输入ID密码)

  • PHPCMS 如何添加模块?(phpcms生成html)

    PHPCMS 如何添加模块?(phpcms生成html)

  • 项目固定资产投资包括
  • 现金流量表现金流量项目明细分类
  • 退回多交城建税税金会计分录
  • 税收优惠退税会计处理
  • 城镇土地使用税的计税依据
  • 建筑企业小规模纳税人升为一般纳税人条件
  • 税务系统 受理
  • 办公室提前退租未摊完的装修费如何处理
  • 一般纳税人软件销售税率
  • 饮料工业发展前景如何
  • 房地产企业营销设施建造费包括哪些
  • 公益性捐赠如何进行纳税调整
  • 商品流通企业商品流转的核算方法有
  • 融资租赁出租方会计处理
  • 少提的税金如何做账
  • 关联方借款的企业所得税政策
  • 企业外购的无形资产摊销,可以加计扣除吗?
  • 变电站是否缴纳房产税
  • 非企业所得税税率
  • 出租的固定资产计提折旧
  • 企业接收政府划入资产的税务处理办法
  • 销项税额转出税额怎么做账?
  • 冲红发票金额大怎么办
  • 公司车贷款还款怎么操作
  • 无形资产可以作为仓储物
  • 应付账款少付怎么做账
  • 已认证的发票对公司影响
  • 鸿蒙的usb调试
  • 生产车间购入材料会计分录
  • 暂估成本比实际高分录
  • 农民合作社扶持政策
  • window10安装教程u盘
  • 出租设备收取租金合法吗
  • 出售应收债权属于收入吗
  • PHP:Memcached::setOptions()的用法_Memcached类
  • 广告公司的设计服务费计入什么科目
  • 免税有那些
  • 配件买不到
  • 固定资产提前报废当月计提折旧吗
  • 工业企业应付账款周转率多少合适
  • 前端手撕代码
  • 固定资产可收回金额怎么算
  • 建筑企业提供服务的机制保障
  • 公司借款方式
  • 小规模纳税人是什么意思
  • Mysql数据库分库分表语句
  • 个体户能不能变更地址
  • 房地产企业所得税管理办法
  • 有借款合同还要写借条吗
  • 用美元账户余额怎么用
  • 社保扣费不成功会再次扣费吗
  • 一般哪些企业可以保供煤炭
  • 股票交易费用计算器小程序
  • 担保贷款中的特殊形式
  • 增值税科目设置及科目号
  • 屠宰税属于什么税
  • mssqlserveradhelper
  • win7如何共享文件夹给另一台电脑使用
  • win8系统怎么关闭自动更新系统
  • centos安装选项怎么选
  • win7专业版系统镜像
  • Win10更新KB3156421补丁后出现设备运行缓慢现象的解决方案
  • 如何配置sendmail
  • 关闭windows游戏
  • pg环境变量
  • javascript屏蔽元素
  • 举例说明如何为教学搭建支架
  • node.js中的http.response.setHeader方法使用说明
  • unity 游戏保存
  • jquery的fadein
  • Android使用opencv处理图片灰度
  • python的设置
  • 修改update.zip
  • js 编程
  • python读dat数据
  • 甘肃省政府非税收入电子发票在哪里打印
  • 浙江税务局12366
  • 江苏电子税务局登录入口
  • 江苏医保给家人用怎么操作
  • 税务转为非正常户的后果
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设