懒加载瀑布流_小鱼酱酱酱的博客-程序员资料
今天简单写下瀑布流特效
1,先放8张图片看看
<body>
<div id="container">
<div class="box"><div class="box-img"><img src="img/pbl/1.jpg" alt=""/></div></div>
<div class="box"><div class="box-img"><img src="img/pbl/2.jpg" alt=""/></div></div>
<div class="box"><div class="box-img"><img src="img/pbl/3.jpg" alt=""/></div></div>
<div class="box"><div class="box-img"><img src="img/pbl/4.jpg" alt=""/></div></div>
<div class="box"><div class="box-img"><img src="img/pbl/5.jpg" alt=""/></div></div>
<div class="box"><div class="box-img"><img src="img/pbl/6.jpg" alt=""/></div></div>
<div class="box"><div class="box-img"><img src="img/pbl/7.jpg" alt=""/></div></div>
<div class="box"><div class="box-img"><img src="img/pbl/8.jpg" alt=""/></div></div>
</div>
</body>2,简单布局下
<style>
*{
padding:0;
margin:0;
}
img{
vertical-align: middle;
}
#container{
position: relative;
}
#container .box{
float:left;
padding-right:10px;
padding-top:10px;
}
#container .box .box-img{
padding:5px;
border:1px solid #ccc;
border-radius:5px;
background-color: #eee;
}
</style>样式中没有设置container的宽度和居中,因为本次想做自适应浏览器宽度的效果(即每行图片的个数是动态的,自适应浏览器宽度的)
3,由于没有后台数据,图片数据通过文件导入了
<script src="data/pbl_JSON.js"></script>
文件是var pbl=[{src:"img/pbl/1.jpg"},{ src:"img/pbl/2.jpg"},{ src:"img/pbl/3.jpg"}...]的形式!
若有后台数据可用ajax方法请求,js实现的代码差异不会很大
4,采用原生js实现效果!
如下遍历元素采用了2种方法均能实现,后续会再总结其他的方法添加进来!
<script>
var container=document.getElementById("container");
var n=-1;//记录加载的次数
//事件监听,待文件,图片等加载完成后运行,防止出现用es6方法先调用后定义未定义而报错!!
window.addEventListener("load",function(){
imgLocation("box");
//判断如果滚动距离+浏览器高度>最后一张图片的offsetTop,则进行加载图片
this.addEventListener("scroll",function(){
isScroll=false;
//实现有限的数据加载
// if(checkAdd("box")){
// n++;
// for(var i=0;i<8;i++){//每次追加8张图片
// if(8+n*8+i>=pbl.length)return false;//当数据提供的图片全部加载完成之后跳出来!
// var div1=document.createElement("div");
// div1.className="box";
// container.appendChild(div1);
// var div2=document.createElement("div");
// div2.className="box-img";
// div1.appendChild(div2);
// var img=new Image();
// img.src=pbl[8+n*8+i].src;
// div2.appendChild(img);
// }
// //执行加载
// imgLocation("box");
// }
//实现无限数据加载
if(checkAdd("box")){
pbl.forEach(function(item){
var div1=document.createElement("div");
div1.className="box";
container.appendChild(div1);
var div2=document.createElement("div");
div2.className="box-img";
div1.appendChild(div2);
var img=new Image();
img.src=item.src;
div2.appendChild(img);
})
//执行加载
imgLocation("box");
}
},false);
},false);//false是冒泡阶段执行,true是捕获阶段执行
//1 定义获取子元素集合的方法
function getChild(child){
var tagsAll=container.getElementsByTagName("*");
var childArr=[];
//for循环遍历
for(var i=0;i<tagsAll.length;i++){
if(tagsAll[i].className==child){
childArr.push(tagsAll[i]);
}
}
//forEach遍历数组
// [...tagsAll].forEach(function(item){//...tagsAll是将集合编程的那个的元素,ES6扩展运算符
// if(item.className==child){
// childArr.push(item);
// }
// })
// console.log(childArr);
return childArr;
}
//2 (完成布局)把图片居中并随着浏览器的宽度改变,一排显示的图片数量也改变,并且container居中!
function imgLocation(child){
var box=getChild(child);
var imgW=box[0].offsetWidth;
//var num=Math.floor(document.documentElement.clientWidth/imgW);//使用Math.floor运算符向下取整
var num=~~(document.documentElement.clientWidth/imgW);//位运算~~,表示去掉小数部分
container.style.cssText="width:"+imgW*num+"px;margin:0 auto";//使container居中
//3 计算每列的最小高度和对应的索引值
var heightArr=[];
var minIndex=0;
[...box].forEach(function(item,index){
if(index<num){
heightArr.push(item.offsetHeight);
}else{
//获得最小高度:minHeight (用apply方法或者...[]方法)
// var minHeight=Math.min.apply(null,heightArr);
var minHeight=Math.min(...heightArr);
//获得最小高度的索引值:minIndex
heightArr.forEach(function(item,index){
if(item==minHeight){
minIndex=index;
}
})
//4 将索引值在num后面的图片放在最小高度的后面
item.style.cssText="position:absolute;top:"+minHeight+"px;left:"+box[minIndex].offsetLeft+"px";
//5 之后更新heightArr[minIndex]的值,使后面的图片不断进行高度比较!
heightArr[minIndex]+=item.offsetHeight;
console.log(heightArr);
}
})
}
//最后 判断鼠标滚动事件进行加载
function checkAdd(child){
var box=getChild(child);
var lastBox=box[box.length-1];
var lastTop=lastBox.offsetTop;
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var clientH=document.documentElement.clientHeight||document.body.clientHeight;
if(scrollTop+clientH>lastTop){
console.log(1);
return true;
}
}
</script>若有问题请提出,谢谢~
智能推荐
oracle job测试,Oracle job 管理_田螺君的博客-程序员资料
SVRMGR> select * from dba_jobs;初始化相关参数job_queue_processesalter system set job_queue_processes=39 scope=spfile;//最大值不能超过1000 ;job_queue_interval = 10 //调度作业刷新频率秒为单位DBA_JOBS describes all jobs in t...
linux内核2.6.3x--Network device support_pppd-440_Simonyd的博客-程序员资料
http://hi.baidu.com/shwkj/item/89a81110ad9a75091894ecaf[*] Network device support ---> 网络设备驱动网卡驱动在这里了。自己看着选吧。不清楚就全部搞成模块也不会出错。 Intermediate Functional Block support这是一个中间层驱动,可以用来灵活的配置资源共
如何下载php-5.5.38.tar.gz_搭建PHP服务器php-5.3.28.tar.gz_埃琳娜莱农的博客-程序员资料
构建PHP运行环境PHP所用的软件 ：php-5.3.28.tar.gz优化模块 ：ZendGuardLoader-php-5.3-linux-glibc23-x86_64.tar.gz(两者之间版本一样)准备工作：卸载RPM安装的PHP[[email protected] php]# rpm -e php php-cli php-ldap php-common php-mysql --nodeps2....
.NET开源类库Nini手册（INI、XML、注册表的配置应用）-中文翻译_c# nini_time-flies的博客-程序员资料
目录1.简介1.1什么是应用程序配置数据？1.2问题1.3介绍Nini2.入门2.1一个简单的例子2.2默认值2.3设置，保存和删除键2.4添加和删除配置2.5键值扩展3.高级主题3.1合并3.2价值别名3.3键值清单3.4活动4.配置类型4.1 Ini文件4.2 XML文件4.3 Windows注册表配置4.4 .NET配置文件4.5命令行（Argv）配置5.有效使用Nini5.1多个用户的处理...
暗刺，高并发五个利器_处理高并发买什么设备_毛奇志的博客-程序员资料
文章目录一、前言二、缓存2.1 缓存本质 + 缓存分类 + 缓存三大特征 + 三种淘汰算法 + 根据业务场景设计过期时间2.2 本地缓存（进程内缓存）2.3 分布式缓存2.4 缓存雪崩 + 缓存穿透 + 缓存击穿 + 缓存更新三、限流（服务限流，表示处理的对象是服务，包括限流四规则 + 限流四实现）3.1 限流3.2 限流四规则3.3 限流四实现四、降级（即服务降级，表示处理的对象是服务，这里指主动降级）4.1 服务降级的定义4.2 服务降级五种方式五、熔断（即服务熔断，表示处理的对象是服务，就是被动降级）
简单理解python中type、class和object的关系_type输出是class是什么_扣脚大仙的博客-程序员资料
先概括一下：1. python中，list、str、dict、touple等一切东东，包括type本身，都是type的实例化对象。2. python中，list、str、dict、touple，包括type的所有类，都是继承于object这个基类。上代码：a=1b='abc'print(type(1))#<class 'int'>print(type(int))#<class 'type'>print(type(b))#<class 'str
随便推点
那些著名或非著名的iOS面试题（上）_再见大华水的博客-程序员资料
1.如何追踪app崩溃率，如何解决线上闪退当iOS设备上的App应用闪退时，操作系统会生成一个crash日志，保存在设备上。crash日志上有很多有用的信息，比如每个正在执行线程的完整堆栈跟踪信息和内存映像，这样就能够通过解析这些信息进而定位crash发生时的代码逻辑，从而找到App闪退的原因。通常来说，crash产生来源于两种问题：违反iOS系统规则导致的crash和App代码逻辑BUG
数据结构（四）—— 图（3）：最短路径问题_大彤小忆的博客-程序员资料
3. 最短路径问题3.1 最短路径问题的抽象3.2 问题分类3.3 单源最短路算法3.3.1 无权图的单源最短路算法3.3.2 有权图的单源最短路算法3.4 多源最短路算法3. 最短路径问题3.1 最短路径问题的抽象 在网络中，求两个不同顶点之间的所有路径中，边的权值之和最小的那一条路径： ⋄\diamond⋄ 这条路径就是两点之间的最短路径（shortestPath) ⋄\diamond⋄ 第一个顶点为源点（Source) ⋄\diamond⋄ 最后一个顶点为终点(Des.
个人微信、企业微信获取手机号、用户信息、unionid_如何查看企业微信客户的手机号码_Dwyane、的博客-程序员资料
所需资料：https://blog.csdn.net/qq_46007966/article/details/122669923?spm=1001.2014.3001.55011、个人微信获取手机号(必须微信认证) // 微信获取手机号（必须微信认证才可使用）<button open-type="getPhoneNumber" @getphonenumber="getMobileInfo">去授权</button>// 通过code、iv、encryptedD...
服务器性能估算_服务器算力估算方法_CodingSir的博客-程序员资料
服务器处理性能估算系统的建设，必须满足未来5年业务发展和管理的需求，所以下面对服务器性能指标的估算，将以满足未来5年的需要为基准。1. 数据库服务器1.1. TPCC值估算约定： 系统同时在线用户数为100人（U1）； 平均每个用户每分钟发出2次业务请求（N1）； 系统发出的业务请求中，更新、查询、统计各占1/3； 平均每次更新业务产生3个事务（T1）；
SAP UTF-8 文件输出方式 及 GUI_DOWNLOAD 参数说明_ChampaignWolf的博客-程序员资料
Function Module: GUI_DOWNLOAD注： 如需要导出 UTF-8 的文件，可使用以下格式即可。 call function 'GUI_DOWNLOAD' exporting filename = p_file FILETYPE = 'DAT' ...
华为鲲鹏服务器gcc升级到7.3.0版本_RzzZ的博客-程序员资料
华为鲲鹏服务器gcc升级到7.3.0版本一、首先检查gcc的版本。二、安装gcc7.3.0三、下载isl、gmp、mpc、mpfr。四、编译安装gcc。五、遇到的问题下载一、首先检查gcc的版本。进入控制台终端执行gcc --version或g++ -v[[email protected] ~]# g++ -vUsing built-in specs.COLLECT_GCC=g++COLLECT_LTO_WRAPPER=/usr/libexec/gcc/aarch64-redhat-linux/4.8