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 相关文章推荐
prototype 中文参数乱码解决方案
Nov 09 Javascript
javascript:void(0)的作用示例介绍
Oct 28 Javascript
基于javascript滚动图片具体实现
Nov 18 Javascript
js中日期的加减法
May 06 Javascript
JavaScript中setUTCFullYear()方法的使用简介
Jun 12 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
Dec 03 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
Dec 10 Javascript
javascript实现简易计算器
Feb 01 Javascript
详解用vue编写弹出框组件
Jul 04 Javascript
基于iScroll实现下拉刷新和上滑加载效果
Jul 18 Javascript
微信小程序城市选择及搜索功能的方法
Mar 22 Javascript
vue使用transition组件动画效果的实例代码
Jan 28 Vue.js
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
微信公众平台接口开发入门示例
2014/12/24 PHP
JS BASE64编码 window.atob(), window.btoa()
2021/03/09 Javascript
FormValid0.5版本发布,带ajax自定义验证例子
2007/08/17 Javascript
javascript Xml增删改查(IE下)操作实现代码
2009/01/30 Javascript
JSQL 基于客户端的成绩统计实现方法
2010/05/05 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
2016/01/18 Javascript
jquery表单验证插件formValidator使用方法
2016/04/01 Javascript
vue.js绑定class和style样式(6)
2016/12/09 Javascript
JS实现加载和读取XML文件的方法详解
2017/04/24 Javascript
vue脚手架vue-cli的学习使用教程
2017/06/06 Javascript
原生JS写Ajax的请求函数功能
2017/12/22 Javascript
React全家桶环境搭建过程详解
2018/05/18 Javascript
JavaScript语句错误throw、try及catch实例解析
2020/08/18 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
2020/10/24 Javascript
[01:00]DOTA2 store: Collection of Artisan's Wonders
2015/08/12 DOTA
[02:59]DOTA2完美大师赛主赛事第三日精彩集锦
2017/11/25 DOTA
Python基于twisted实现简单的web服务器
2014/09/29 Python
决策树的python实现方法
2014/11/18 Python
将Python代码打包为jar软件的简单方法
2015/08/04 Python
Python基于回溯法解决01背包问题实例
2017/12/06 Python
Python实现统计给定字符串中重复模式最高子串功能示例
2018/05/16 Python
Python装饰器的执行过程实例分析
2018/06/04 Python
python 实现GUI(图形用户界面)编程详解
2019/07/17 Python
python3 selenium自动化 frame表单嵌套的切换方法
2019/08/23 Python
python 操作excel表格的方法
2020/12/05 Python
CSS3实现头像旋转效果
2017/03/13 HTML / CSS
用canvas画心电图的示例代码
2018/09/10 HTML / CSS
HTML5播放实现rtmp流直播
2020/06/16 HTML / CSS
德国最大的设计师鞋网上商店:Budapester
2017/12/07 全球购物
日本索尼音乐商店:Sony Music Shop
2018/07/17 全球购物
什么是ARP(Address Resolution Protocol)地址解析协议
2013/10/31 面试题
创业计划书的主要内容有哪些
2014/01/29 职场文书
财务情况说明书范文
2014/05/06 职场文书
卖房授权委托书样本
2014/10/05 职场文书
软件项目经理岗位职责
2015/04/01 职场文书
2015年司机工作总结
2015/04/23 职场文书