H5、jquery实现无缝滚动加载下一页+瀑布流布局资源-CSDN下载

共13个文件

png：6个

js：4个

css：1个

jquery

瀑布流布局

需积分: 5 48 浏览量 2023-05-19 16:43:13 上传评论收藏 1.95MB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

H5滚动加载下一页+瀑布流布局.rar （13个子文件）

H5滚动加载下一页+瀑布流布局

imagesloaded.pkgd.js 14KB

jquery-1.7.2.min.js 93KB

masonry.pkgd.js 69KB

dropload.js 10KB

css

index.css 5KB

index.html 13KB

images

goods.jpg 98KB

1.png 434KB

6.png 104KB

5.png 21KB

4.png 783KB

toTop.png 1KB

2.png 515KB

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta content="telephone=no" name="format-detection"> <title>H5滚动加载下一页+瀑布流布局</title> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/imagesloaded.pkgd.js"></script>  <script type="text/javascript" src="js/masonry.pkgd.js"></script>  <script type="text/javascript" src="js/dropload.js"></script> <link rel="stylesheet" href="css/index.css" type="text/css"> <script> (function (doc, win) { try { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', ratio = window.devicePixelRatio || 1, clientWidth = docEl.clientWidth, recalc = function () { clientWidth = docEl.clientWidth; //防止clientWdith为0 if (!clientWidth) { setTimeout(recalc, 100); return; } win.g_html_font_size = clientWidth / 7.5; win.g_fixed_left = 0; docEl.style.fontSize = win.g_html_font_size + 'px'; docEl.setAttribute("data-dpr", ratio); try { fix(); horizontal(); } catch (e) { } }, fix = function () { //部分安卓机型中适配会出现问题 var ua = navigator.userAgent; var isIOS = /(iPhone|iPad|iPod)/.test(ua); // 非苹果设备，均进行检测 if (!isIOS) { if (!win.getComputedStyle) { console.log("getComputedStyle not support") return } var div = win.document.createElement('div'); div.style.width = '7.5rem'; win.document.body.appendChild(div); var getWidth = parseFloat(win.getComputedStyle(div).width); console.log("divWidth", getWidth); if (getWidth !== clientWidth) { console.log("div is not full screen,fix start"); // 此时是出问题的情况 var ratio = getWidth / clientWidth; console.log("ratio", ratio); win.g_html_font_size = (win.g_html_font_size / ratio).toFixed(4); docEl.style.fontSize = win.g_html_font_size + 'px'; console.log("g_html_font_size", win.g_html_font_size); } div.remove(); } }, horizontal = function () { //如果是横屏,则缩小界面，尽可能显示更多UI.->将页面内容宽度设置为480像素（7.5REM X 64 =480 PX） //IPAD竖屏的宽高比是0.75 ,横屏1.333 if (window.innerWidth >= 480 && window.innerWidth / window.innerHeight > 0.74) { console.log('horizontal') win.g_html_font_size = 64; docEl.style.fontSize = '64px'; console.log("g_html_font_size", win.g_html_font_size); //计算一个fixed元素的左偏移量，因为fixed元素以body为参照，而不以app为参照 window.g_fixed_left = (document.body.clientWidth - 480) / 2 / 64; //单位rem console.log('g_fixed_left', window.g_fixed_left) // console.log('SCROLL WIDTH',window.innerWidth - document.body.clientWidth) //注PC 中由于有滚动条页面宽度比实际小17px，这里不考虑 } } recalc(); if (!win.addEventListener) { setTimeout(recalc, 1000); } win.addEventListener(resizeEvt, recalc, false); win.addEventListener('DOMContentLoaded', recalc, false); } catch (e) { console.error(e.message) } })(document, window); /** * 处理iOS 键盘收起页面未下移bug */ (/iphone|ipod|ipad/i.test(navigator.appVersion)) && document.addEventListener('blur', function (e) { // 这里加了个类型判断，因为a等元素也会触发blur事件 if (['input', 'textarea'].indexOf(e.target.localName) >= 0 && window) { // console.log('blur',document.body.scrollTop) // document.body.scrollTop = document.body.scrollTop + 1 // console.log('blur',document.body.scrollTop) window.scrollTo(window.scrollX, window.scrollY + 1); console.log('blur', window.scrollY) } }, true) </script> </head> <body> <div class="scroll-box"> <div class="floor3" id="floor3"> <p class="page-title">这是内容标题</p> <div class="floor3-con grid">  </div> </div> </div> <img src="images/toTop.png" class="toTop"/> </body> <script> var page = 0; // 当前页 var totalPage = 3 // 总页数 // 监听是否到底了 $('#floor3').dropload({ scrollArea : window, // 滚动区域 // distance : 200, threshold : 50, domDown : { // 自定义加载下一页样式 domClass : 'dropload-down', domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>', domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>', domNoData : '<div class="dropload-noData">没有更多数据啦~</div>' }, loadDownFn : function(me){ // 触底了的话会自动触发这个方法 if(page<totalPage) { page++; console.log('触底了加载下一页',page) // 拼接HTML var result = ''; // 模拟接口请求 setTimeout(function(){ // 不能提前在html中显示节点，会导致APP不触发加载下一页 var tempStr =` <div class="item grid-item"> <div class="item-box"> <div class="img-box relative"> <img class="lazy" src="./images/6.png"/> </div> <div class="item-con"> <p class="title">标题标题标题标</p> </div> </div> </div> <div class="item grid-item"> <div class="item-box">

评论收藏

内容反馈