<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
body{
background:#dedede;
margin:0;
padding: 0;
}
.pubu-container{
width:70%;
margin:0 auto;
/*弹性布局*/
display: flex;
/*方向*/
flex-direction: row;/* 可以理解成float:left. */
}
.pubu-container .item{
flex:1 /*弹性项的占比*/;
margin: 17px;
}
.pubu-container .item img{
width:100%;
border: 10px solid white;
margin-top: 8px;
transition:all 0.3s ease-in-out; /*慢速开始和结束*/
}
.pubu-container .item img:hover{
cursor: pointer; /*悬停光标*/
transform: scale(1.05);/*变大1.1倍*/
box-shadow: 1px 3px 2px 1px #999;
}
</style>
<script>
//屏幕默认大小,初始化图片的占用位置
var windowHeight = window.screen.height+500;
var imgId = 0;
window.onload = function(){
insertImg(); /*调用插入图片的算法函数*/
//监听滚动事件
window.document.addEventListener("scroll", function(){
//document.documentElement.scrollTop:已经滚动的内容高度
//window.screen.height: 窗口高度
//document.documentElement.scrollHeight:能滚动的最大高度
if(document.documentElement.scrollTop+ window.screen.height > document.documentElement.scrollHeight){
//再此插入图片
windowHeight+=500;
insertImg();
}
});
}
//插入图片的算法
var insertImg = function(){
var inter = setInterval(function(){ //就是给浏览器渲染图片的时间
if(document.documentElement.scrollHeight > windowHeight) //达到预期的高度. 停止
{
clearInterval(inter);//停止定时器
}
var mDiv = minDiv();
//插入图片
imgId++;
if(imgId > 10){
imgId = 1;
}
var img = document.createElement("img");
img.setAttribute("src","img/"+imgId+".jpg");
mDiv.appendChild(img); //放图, 给浏览器一个指令. 插图. 但是浏览器的渲染还没有完成.
}, 100); //定时器, 每隔100毫秒. 运行一次function
}
/**
* 计算当前哪一列是高度最小的
*/
var minDiv = function(){
var pb1 = document.getElementById("pubu-01");
var pb2 = document.getElementById("pubu-02");
var pb3 = document.getElementById("pubu-03");
var pb4 = document.getElementById("pubu-04");
var pbImgs_1 = pb1.children;
var pbImgs_2 = pb2.children;
var pbImgs_3 = pb3.children;
var pbImgs_4 = pb4.children;
var pb1Height = jisuan(pbImgs_1); //调用计算函数计算高度
var pb2Height = jisuan(pbImgs_2);
var pb3Height = jisuan(pbImgs_3);
var pb4Height = jisuan(pbImgs_4);
var minHeight = Math.min(pb1Height, pb2Height, pb3Height, pb4Height);
if(minHeight == pb1Height){
return pb1;
}
if(minHeight == pb2Height){
return pb2;
}
if(minHeight == pb3Height){
return pb3;
}
if(minHeight == pb4Height){
return pb4;
}
}
var jisuan = function(pbImgs){
if(pbImgs == null || pbImgs.length == 0){//这一列还没有图片
return 0;
} else {
var height = 0;
//获取到当前列每一个图片
for(var i = 0 ; i < pbImgs.length;i++){
var img = pbImgs[i];
var h = img.height;
height += h;//累加
}
return height;
}
}
</script>
</head>
<body>
<div class="pubu-container">
<div class="item" id="pubu-01"></div>
<div class="item" id="pubu-02"></div>
<div class="item" id="pubu-03"></div>
<div class="item" id="pubu-04"></div>
</div>
</body>
</html>
html-无限加载瀑布流(含动画效果)-源码
版权申诉
29 浏览量
2023-09-06
20:34:13
上传
评论
收藏 2.38MB RAR 举报
无限加载瀑布流.rar （11个子文件） 
无限加载瀑布流 瀑布流-src img 
2.jpg 150KB 10.jpg 98KB 6.jpg 446KB 1.jpg 163KB 5.jpg 293KB 8.jpg 245KB 3.jpg 147KB 7.jpg 321KB 9.jpg 460KB 4.jpg 389KB
index.html 4KB资源评论
DTcode7
- 粉丝: 1441
- 资源: 4058
最新资源
- mybatis中的动态sql, 涉及 where trim set if foreach等
- 简单- 快递运输（Java & JS & Python & C）.html
- mybatis框架 更改ems系统，使用动态sql等.zip
- 易语言工具条下拉菜单实现
- Mybatis动态SQL高级映射.zip
- 源码esp8266开发板机智云机智云智能灯
- Python实现多图像转换成连贯的PDF文件，支持所有图片格式，可预览、裁剪、自定义PDF布局、设置图像顺序、PDF质量选择等
- H5腾讯地图选择位置组件
- 基于UCC28019+LM5017电源板硬件（原理图+PCB）工程文件.zip
- 源码esp8266开发板机智云机智云空气净化器
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
