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 相关文章推荐
用javascript实现给出的盒子的序列是否可连为一矩型
Aug 30 Javascript
Js 本页面传值实现代码
May 17 Javascript
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
May 24 Javascript
读jQuery之十一 添加事件核心方法
Jul 31 Javascript
div模拟选择框示例代码
Nov 03 Javascript
JS中Date日期函数中的参数使用介绍
Jan 02 Javascript
JavaScript中字符串分割函数split用法实例
Apr 07 Javascript
编写React组件项目实践分析
Mar 04 Javascript
JS/HTML5游戏常用算法之追踪算法实例详解
Dec 12 Javascript
elementUI 动态生成几行几列的方法示例
Jul 11 Javascript
关于vue.js中实现方法内某些代码延时执行
Nov 14 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
Phpbean路由转发的php代码
2008/01/10 PHP
php和mysql中uft-8中文编码乱码的几种解决办法
2012/04/19 PHP
PHP Parse Error: syntax error, unexpected $end 错误的解决办法
2012/06/05 PHP
php中CI操作多个数据库的代码
2012/07/05 PHP
利用PHP实现一个简单的用户登记表示例
2017/04/25 PHP
JavaScript 原型链学习总结
2010/10/29 Javascript
js不能跳转到上一页面的问题解决方法
2013/03/01 Javascript
javascript写的异步加载js文件函数(支持数组传参)
2014/06/07 Javascript
jquery trigger函数执行两次的解决方法
2016/02/29 Javascript
AngularJS基础 ng-readonly 指令简单示例
2016/08/02 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
2016/12/07 Javascript
解决拦截器对ajax请求的拦截实例详解
2016/12/21 Javascript
Ionic3 UI组件之autocomplete详解
2017/06/08 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
2017/06/09 Javascript
jQuery pager.js 插件动态分页功能实例分析
2019/08/02 jQuery
微信小程序tab左右滑动切换功能的实现代码
2021/02/08 Javascript
[08:47]DOTA2每周TOP10 精彩击杀集锦vol.6
2014/06/25 DOTA
浅谈Python类的__getitem__和__setitem__特殊方法
2016/12/25 Python
python模块smtplib学习
2018/05/22 Python
Django实现发送邮件功能
2019/07/18 Python
python实现简易淘宝购物
2019/11/22 Python
Python 操作 PostgreSQL 数据库示例【连接、增删改查等】
2020/04/21 Python
Pycharm安装并配置jupyter notebook的实现
2020/05/18 Python
keras load model时出现Missing Layer错误的解决方式
2020/06/11 Python
Zatchels官网:英国剑桥包品牌
2021/01/12 全球购物
建筑经济管理专业求职信分享
2014/01/06 职场文书
毕业论文评语大全
2014/04/29 职场文书
音乐教师求职信
2014/06/28 职场文书
人力资源管理求职信
2014/08/07 职场文书
《改造我们的学习》心得体会
2014/11/07 职场文书
工程部经理岗位职责
2015/02/02 职场文书
人民的好儿女观后感
2015/06/18 职场文书
公司开业主持词
2015/07/02 职场文书
会计继续教育培训心得体会
2016/01/19 职场文书
Python中基础数据类型 set集合知识点总结
2021/08/02 Python
Python语言中的数据类型-序列
2022/02/24 Python