<!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">
H5、jquery实现无缝滚动加载下一页+瀑布流布局
需积分: 5 150 浏览量
2023-05-19
16:43:13
上传
评论
收藏 1.95MB RAR 举报
H5滚动加载下一页+瀑布流布局.rar （13个子文件） 
H5滚动加载下一页+瀑布流布局 js 
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资源评论
