解析javascript瀑布流原理实现图片滚动加载


Posted in Javascript onMarch 10, 2016

先科普下瀑布流吧

瀑布流,又称瀑布流式布局。是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest,逐渐在国内流行开来。国内大多数清新站基本为这类风格,像美丽说、淘宝网都有使用。

这是我实现的一个效果,就是怎么滚动都加载不玩。就跟瀑布一样流啊流!

解析javascript瀑布流原理实现图片滚动加载

这里的实现方式我们只说Js实现方法

实现原理:

对容器中已有数据块元素进行第一次计算1 容器总宽度 2 列宽度  3 最小列数 ,得到列数后,用一个数组存放盒子所有高度,找出最小高度。之后根据序列号更新高度;看着有些拗口,实现起来就很简单了。

对于滚动加载:即滚动到哪个高度后,需要去加载数据,其实这个就是列的最小高度值,这样当前滚动值和最小高度值比较一下即可判断出来,是否要触发加载数据;就是写一个函数,用来判断是否达到加载图片条件,如果达到,就开始加载。比如获得最后一张图片的offsetTop,可视区高度,滚动距离,也就是当图片的offsetTop小于可视区高度和滚动距离之和的情况下,此时就应该加载了,不过条件可以随便定,也可以等滚动到图片的一半时候在触发加载条件,如图所示:

解析javascript瀑布流原理实现图片滚动加载

先上HTML CSS代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>waterfall</title>
 <script src="script.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
  body {
   background: yellow;
  }
  #container {

  }
  #container .pin {
   padding-left: 15px;
   padding-top: 15px;
   float: left;
  }
  #container .div-box {
   float: left;
   border: 1px solid #ccc;
   box-shadow: 0 0 5px #bbb;
   background: #fff;
   padding: 12px;
   border-radius: 9px;
  }
  #container .div-box img {
   width: 300px;
  }
  #container .div-box p {
   text-align: center;
   font-size: 20px;
   font-weight: bold;
   color: red;
  }
 </style>
 <script>
  
 </script>
</head>
<body>
 <div id="container">
  <div class="pin">
   <div class="div-box">
    <img src="img/1.jpg" alt="">
    <p>白超华-博客园</p>
   </div>
  </div>
  <div class="pin">
   <div class="div-box">
    <img src="img/2.jpg" alt="">
    <p>白超华-博客园</p>
   </div>
  </div>
  <div class="pin">
   <div class="div-box">
    <img src="img/3.jpg" alt="">
    <p>白超华-博客园</p>
   </div>
  </div>
  <div class="pin">
   <div class="div-box">
    <img src="img/4.jpg" alt="">
    <p>白超华-博客园</p>
   </div>
  </div>
  <div class="pin">
   <div class="div-box">
    <img src="img/5.jpg" alt="">
    <p>白超华-博客园</p>
   </div>
  </div>
  <div class="pin">
   <div class="div-box">
    <img src="img/6.jpg" alt="">
    <p>白超华-博客园</p>
   </div>
  </div>
  <div class="pin">
   <div class="div-box">
    <img src="img/7.jpg" alt="">
    <p>白超华-博客园</p>
   </div>
  </div>
  <div class="pin">
   <div class="div-box">
    <img src="img/8.jpg" alt="">
    <p>白超华-博客园</p>
   </div>
  </div>
  <div class="pin">
   <div class="div-box">
    <img src="img/9.jpg" alt="">
    <p>白超华-博客园</p>
   </div>
  </div>
  <div class="pin">
   <div class="div-box">
    <img src="img/10.jpg" alt="">
    <p>白超华-博客园</p>
   </div>
  </div>
  <div class="pin">
   <div class="div-box">
    <img src="img/1.jpg" alt="">
    <p>白超华-博客园</p>
   </div>
  </div>
  <div class="pin">
   <div class="div-box">
    <img src="img/2.jpg" alt="">
    <p>白超华-博客园</p>
   </div>
  </div>
  <div class="pin">
   <div class="div-box">
    <img src="img/3.jpg" alt="">
    <p>白超华-博客园</p>
   </div>
  </div>
  <div class="pin">
   <div class="div-box">
    <img src="img/4.jpg" alt="">
    <p>白超华-博客园</p>
   </div>
  </div>
  <div class="pin">
   <div class="div-box">
    <img src="img/5.jpg" alt="">
    <p>白超华-博客园</p>
   </div>
  </div>
  <div class="pin">
   <div class="div-box">
    <img src="img/6.jpg" alt="">
    <p>白超华-博客园</p>
   </div>
  </div>
 </div>
</body>
</html>

JS代码,每行都有注释

window.onload = function(){
 var data = {     //模拟后台数据 的一个JSON格式的文件
  "data":[
   {"src":"1.jpg"},
   {"src":"2.jpg"},
   {"src":"3.jpg"},
   {"src":"4.jpg"},
   {"src":"5.jpg"},
  ]
 };
 window.onscroll = function(){
  if(checkScroll()){   //判断是否具备滚动加载得条件
   var oParent = document.getElementById('container');
   for(var i=0; i<data.data.length; i++){
    var div1 = document.createElement('div'); //创建div元素
    div1.className = 'pin';     //设置class
    oParent.appendChild(div1);
    var div2 = document.createElement('div');//创建div元素
    div2.className = 'div-box';
    div1.appendChild(div2);
    var imgs = document.createElement('img');//创建img元素
    imgs.style.width = '300px';
    imgs.src = 'img/'+data.data[i].src; //设置读取路径
    div2.appendChild(imgs);
    var p = document.createElement('p');//创建p元素
    p.innerHTML = '白超华-博客园';
    div2.appendChild(p);
   }
   waterfall('container','pin');  //--注意 别忘了这句,当滚动时候就执行
  }
 }
 waterfall('container','pin');
}
function waterfall(parent, box){
 var oParent = document.getElementById(parent);//获取父级对象
 var aBox = getByClass(oParent,box);//获取所有class为pin的盒子的集合
 var boxWidth = aBox[0].offsetWidth;//获取一个盒子的宽
 var pageWidth = document.body.clientWidth||document.documentElement.clientWidth;//获取可视区宽
 var cols = Math.floor(pageWidth/boxWidth);//获得列数
 var arrH = [];//用于存放盒子的高

 for(var i=0; i<aBox.length; i++){
  if(i<cols){//当小于第一列个数的时候
   arrH.push(aBox[i].offsetHeight);
  } else {
   var minH = Math.min.apply(null,arrH);//得到数组中盒字的最小高度minH;
   var index = getMinIndex(arrH,minH);

   aBox[i].style.position = 'absolute';//设置绝对定位
   aBox[i].style.top = minH+'px';//设置top,就是最小高度
   aBox[i].style.left = aBox[0].offsetWidth*index+'px';//设置left,就是一个盒子的宽*index索引数
   arrH[index]+=aBox[i].offsetHeight; //更新新添加盒字后的列高
  }
 }
}
//通过父级获取class
function getByClass(parent, classname){
 var aClass = parent.getElementsByTagName('*');
 var arr = [];

 for(var i=0; i<aClass.length; i++){
  if(aClass[i].className == classname){
   arr.push(aClass[i]);
  }
 }
 return arr;
}
//最小值的索引index
function getMinIndex(arr,val){
 for( i in arr){
  if(arr[i] == val){
   return i;
  }
 }
}
//
function checkScroll(){
 var oParent = document.getElementById('container');
 var aBox = getByClass(oParent,'pin');
 var lastBoxHeight = aBox[aBox.length-1].offsetTop;// 当滚到到这个距离时候就开始加载
 var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//兼容的滚动距离
 var documentHeight = document.documentElement.clientHeight; //页面高度
 if(lastBoxHeight<scrollTop+documentHeight){
  return true;
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
Tinymce+jQuery.Validation使用产生的BUG
Mar 29 Javascript
关于jQuery的inArray 方法介绍
Oct 08 Javascript
利用jQuary实现文字浮动提示效果示例代码
Dec 26 Javascript
node.js使用nodemailer发送邮件实例
Mar 10 Javascript
node.js中的fs.createReadStream方法使用说明
Dec 17 Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
Jan 28 Javascript
javascript包装对象实例分析
Mar 27 Javascript
原生js实现图片层叠轮播切换效果
Feb 02 Javascript
angularjs实现猜数字大小功能
May 20 Javascript
Vue实现todolist删除功能
Jun 26 Javascript
vue实现跨域的方法分析
May 21 Javascript
javascript实现简易数码时钟
Mar 30 Javascript
javascript实现可键盘控制的抽奖系统
Mar 10 #Javascript
基于javascript制作微信聊天面板
Aug 09 #Javascript
关于Bootstrap弹出框无法调用问题的解决办法
Mar 10 #Javascript
TypeScript Type Innference(类型判断)
Mar 10 #Javascript
JavaScript File分段上传
Mar 10 #Javascript
ES6中非常实用的新特性介绍
Mar 10 #Javascript
ES6的新特性概览
Mar 10 #Javascript
You might like
PHP 中文乱码解决办法总结分析
2009/07/30 PHP
PHP操作xml代码
2010/06/17 PHP
php学习笔记之面向对象编程
2012/12/29 PHP
IE下双击checkbox反应延迟问题的解决方法
2014/03/27 Javascript
Lua表达式和控制结构学习笔记
2014/12/15 Javascript
CSS图片响应式 垂直水平居中
2015/08/14 Javascript
简单实现的JQuery文本框水印插件
2016/06/14 Javascript
Angular directive递归实现目录树结构代码实例
2017/05/05 Javascript
详解Angular2中Input和Output用法及示例
2017/05/21 Javascript
pm2 部署 node的三种方法示例
2017/10/20 Javascript
JS正则表达式封装与使用操作示例
2019/05/15 Javascript
Vue中的组件及路由使用实例代码详解
2019/05/22 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
2019/05/24 Javascript
微信小程序实现侧边分类栏
2019/10/21 Javascript
JavaScript的console命令使用实例
2019/12/03 Javascript
借助云开发实现小程序短信验证码的发送
2020/01/06 Javascript
关于vue 结合原生js 解决echarts resize问题
2020/07/26 Javascript
[01:04:05]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
pycharm 使用心得(五)断点调试
2014/06/06 Python
Python闭包和装饰器用法实例详解
2019/05/22 Python
Python生态圈图像格式转换问题(推荐)
2019/12/02 Python
Python virtualenv虚拟环境实现过程解析
2020/04/18 Python
pip 20.3 新版本发布!即将抛弃 Python 2.x(推荐)
2020/12/16 Python
python matplotlib工具栏源码探析三之添加、删除自定义工具项的案例详解
2021/02/25 Python
世界上最值得信赖的多日游在线市场:TourRadar
2018/07/20 全球购物
英国女性时尚鞋类的潮流制造者:Koi Footwear
2018/10/19 全球购物
eHarmony英国:全球领先的认真恋爱约会平台之一
2020/11/16 全球购物
大学生求职信范文应怎么写
2014/01/01 职场文书
护士自我评价范文
2014/01/25 职场文书
《我的信念》教学反思
2014/02/15 职场文书
村长党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
故宫导游词
2015/01/31 职场文书
焦裕禄观后感
2015/06/03 职场文书
公证书
2019/04/17 职场文书
如何制定销售人员薪酬制度?
2019/07/09 职场文书
解决MySQL存储时间出现不一致的问题
2021/04/28 MySQL