javascript实现仿百度图片的瀑布流加载效果


Posted in Javascript onApril 20, 2016

由于没有服务器,就用一个json字符串作为下拉时加载图片数据的来源了

html:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="js/waterfall.js"></script>
<style type="text/css">
 *{padding: 0;margin:0;}
 #main{
  position: relative;
 }
 .pin{
  padding: 15px 0 0 15px;
  float:left;
 }
 .box{
  padding: 10px;
  border:1px solid #ccc;
  box-shadow: 0 0 6px #ccc;
  border-radius: 5px;
 }
 .box img{
  width:162px;
  height:auto;
 }
</style>
</head>
<body>
<div id="main">
 <div class="pin">
  <div class="box">
   <img src="./images/1.jpg"/>
  </div>
 </div>
 <div class="pin">
  <div class="box">
   <img src="./images/2.jpg"/>
  </div>
 </div>
 <div class="pin">
  <div class="box">
   <img src="./images/3.jpg"/>
  </div>
 </div>
 <div class="pin">
  <div class="box">
   <img src="./images/4.jpg"/>
  </div>
 </div>
 <div class="pin">
  <div class="box">
   <img src="./images/5.jpg"/>
  </div>
 </div>
 <div class="pin">
  <div class="box">
   <img src="./images/6.jpg"/>
  </div>
 </div>
 <div class="pin">
  <div class="box">
   <img src="./images/7.jpg"/>
  </div>
 </div>
 <div class="pin">
  <div class="box">
   <img src="./images/8.jpg"/>
  </div>
 </div>
 <div class="pin">
  <div class="box">
   <img src="./images/9.jpg"/>
  </div>
 </div>
 <div class="pin">
  <div class="box">
   <img src="./images/10.jpg"/>
  </div>
 </div>
 <div class="pin">
  <div class="box">
   <img src="./images/11.jpg"/>
  </div>
 </div>
 <div class="pin">
  <div class="box">
   <img src="./images/12.jpg"/>
  </div>
 </div>
 <div class="pin">
  <div class="box">
   <img src="./images/13.jpg"/>
  </div>
 </div>
 <div class="pin">
  <div class="box">
   <img src="./images/14.jpg"/>
  </div>
 </div>
 <div class="pin">
  <div class="box">
   <img src="./images/15.jpg"/>
  </div>
 </div>
 <div class="pin">
  <div class="box">
   <img src="./images/16.jpg"/>
  </div>
 </div>
 <div class="pin">
  <div class="box">
   <img src="./images/17.jpg"/>
  </div>
 </div>
 <div class="pin">
  <div class="box">
   <img src="./images/18.jpg"/>
  </div>
 </div>
 <div class="pin">
  <div class="box">
   <img src="./images/19.jpg"/>
  </div>
 </div>
 <div class="pin">
  <div class="box">
   <img src="./images/20.jpg"/>
  </div>
 </div>
 <div class="pin">
  <div class="box">
   <img src="./images/21.jpg"/>
  </div>
 </div>
</div>
</body>
</html>

JSWallper.js:

window.onload=function(){
 
 waterfall('main','pin');
 
 var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]};
 
 window.onscroll=function(){
  if(checkscrollside()){
   var oParent = document.getElementById('main');// 父级对象
   for(var i=0;i<dataInt.data.length;i++){
    var oPin=document.createElement('div'); //添加 元素节点
    oPin.className='pin';     //添加 类名 name属性
    oParent.appendChild(oPin);    //添加 子节点
    var oBox=document.createElement('div');
    oBox.className='box';
    oPin.appendChild(oBox);
    var oImg=document.createElement('img');
    oImg.src='./images/'+dataInt.data[i].src;
    oBox.appendChild(oImg);
   }
   waterfall('main','pin');
  };
 }
}
 
/*
 parend 父级id
 pin 元素id
*/
function waterfall(parent,pin){
 var oParent=document.getElementById(parent);// 父级对象
 var aPin=getClassObj(oParent,pin);// 获取存储块框pin的数组aPin
 var iPinW=aPin[0].offsetWidth;// 一个块框pin的宽
 var num=Math.floor(document.documentElement.clientWidth/iPinW);//每行中能容纳的pin个数【窗口宽度除以一个块框宽度】
 oParent.style.cssText='width:'+iPinW*num+'px;margin:0 auto;';//设置父级居中样式:定宽+自动水平外边距
 
 var pinHArr=[];//用于存储 每列中的所有块框相加的高度。a
 for(var i=0;i<aPin.length;i++){//遍历数组aPin的每个块框元素
  var pinH=aPin[i].offsetHeight;
  if(i<num){
   pinHArr[i]=pinH; //第一行中的num个块框pin 先添加进数组pinHArr
  }else{
   var minH=Math.min.apply(null,pinHArr);//数组pinHArr中的最小值minH
   var minHIndex=getminHIndex(pinHArr,minH);
   aPin[i].style.position='absolute';//设置绝对位移
   aPin[i].style.top=minH+'px';
   aPin[i].style.left=aPin[minHIndex].offsetLeft+'px';
   //数组 最小高元素的高 + 添加上的aPin[i]块框高
   pinHArr[minHIndex]+=aPin[i].offsetHeight;//更新添加了块框后的列高
  }
 }
}
 
 /*
 *通过父级和子元素的class类 获取该同类子元素的数组
 */
function getClassObj(parent,className){
 var obj=parent.getElementsByTagName('*');//获取 父级的所有子集
 var pinS=[];//创建一个数组 用于收集子元素
 for (var i=0;i<obj.length;i++) {//遍历子元素、判断类别、压入数组
  if (obj[i].className==className){
   pinS.push(obj[i]);
  }
 };
 return pinS;
}
/****
 *获取 pin高度 最小值的索引index
 */
function getminHIndex(arr,minH){
 for(var i in arr){
  if(arr[i]==minH){
   return i;
  }
 }
}

function checkscrollside(){
 var oParent=document.getElementById('main');
 var aPin=getClassObj(oParent,'pin');
 var lastPinH=aPin[aPin.length-1].offsetTop+Math.floor(aPin[aPin.length-1].offsetHeight/2);//创建【触发添加块框函数waterfall()】的高度:最后一个块框的距离网页顶部+自身高的一半(实现未滚到底就开始加载)
 var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//注意解决兼容性
 var documentH=document.documentElement.clientHeight;//页面高度
 return (lastPinH<scrollTop+documentH)?true:false;//到达指定高度后 返回true,触发waterfall()函数
}

演示图:

javascript实现仿百度图片的瀑布流加载效果

源码下载:https://3water.com/jiaoben/452663.html

演示地址:http://demo.3water.com/js/2016/JSWallper/

Javascript 相关文章推荐
登陆成功后自动计算秒数执行跳转
Jan 23 Javascript
jquery mobile动态添加元素之后不能正确渲染解决方法说明
Mar 05 Javascript
js获取当前页面的url网址信息
Jun 12 Javascript
jquery模拟进度条实现方法
Aug 03 Javascript
js实现鼠标点击文本框自动选中内容的方法
Aug 20 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
Aug 23 Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
Jun 30 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
Sep 21 Javascript
Node.js中环境变量process.env的一些事详解
Oct 26 Javascript
Node.Js生成比特币地址代码解析
Apr 21 Javascript
七行JSON代码把你的网站变成移动应用过程详解
Jul 09 Javascript
JavaScript canvas绘制渐变颜色的矩形
Feb 18 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
Apr 19 #Javascript
javascript实现简单计算器效果【推荐】
Apr 19 #Javascript
Jquery实现的简单轮播效果【附实例】
Apr 19 #Javascript
jQuery实现选项联动轮播效果【附实例】
Apr 19 #Javascript
浅析JavaScript中浏览器的兼容问题
Apr 19 #Javascript
javascript+HTML5 Canvas绘制转盘抽奖
May 16 #Javascript
深入浅析JavaScript中的constructor
Apr 19 #Javascript
You might like
ThinkPHP的RBAC(基于角色权限控制)深入解析
2013/06/17 PHP
window.onload 加载完毕的问题及解决方案(上)
2009/07/09 Javascript
利用jQuery的$.event.fix函数统一浏览器event事件处理
2009/12/21 Javascript
关于js拖拽上传 [一个拖拽上传修改头像的流程]
2011/07/13 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
2014/08/20 Javascript
jquery复选框多选赋值给文本框的方法
2015/01/27 Javascript
JavaScript中实现继承的三种方式和实例
2015/01/29 Javascript
jQuery移动web开发中的页面初始化与加载事件
2015/12/03 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
2016/05/10 Javascript
js获取所有checkbox的值的简单实例
2016/05/30 Javascript
js模拟微博发布消息
2017/02/23 Javascript
vue-cli如何添加less 以及sass
2017/07/06 Javascript
mpvue构建小程序的方法(步骤+地址)
2018/05/22 Javascript
vue实现动态列表点击各行换色的方法
2018/09/13 Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
2019/05/05 Javascript
[00:09]DOTA2全国高校联赛 精彩活动引爆全场
2018/05/30 DOTA
Python常用正则表达式符号浅析
2014/08/13 Python
Python中dictionary items()系列函数的用法实例
2014/08/21 Python
python回调函数中使用多线程的方法
2017/12/25 Python
Python将字符串常量转化为变量方法总结
2019/03/17 Python
python聚类算法解决方案(rest接口/mpp数据库/json数据/下载图片及数据)
2019/08/28 Python
Python爬虫使用浏览器cookies:browsercookie过程解析
2019/10/22 Python
pytorch 常用线性函数详解
2020/01/15 Python
python关于倒排列的知识点总结
2020/10/13 Python
python3从网络摄像机解析mjpeg http流的示例
2020/11/13 Python
DVF官方网站:美国时装界尊尚品牌
2017/08/29 全球购物
EJB发布WEB服务一般步骤
2012/10/31 面试题
餐饮采购员岗位职责
2014/03/15 职场文书
读书之星事迹材料
2014/05/12 职场文书
公司节能减排方案
2014/05/16 职场文书
孔庙导游词
2015/02/04 职场文书
小学英语听课心得体会
2016/01/14 职场文书
送给火锅店的创意营销方案!
2019/07/08 职场文书
2020年元旦晚会策划书模板
2019/12/30 职场文书
解析MySQL binlog
2021/06/11 MySQL
Mysql数据库事务的脏读幻读及不可重复读详解
2022/05/30 MySQL