解析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 相关文章推荐
prototype.js的Ajax对象
Sep 23 Javascript
学习并汇集javascript匿名函数
Nov 25 Javascript
event.currentTarget与event.target的区别介绍
Dec 31 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
Aug 25 Javascript
实现React单页应用的方法详解
Aug 02 Javascript
浅谈react性能优化的方法
Sep 05 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
May 21 Javascript
了解在JavaScript中将值转换为字符串的5种方法
Jun 06 Javascript
微信小程序webSocket的使用方法
Feb 20 Javascript
js实现小星星游戏
Mar 23 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
Apr 17 Javascript
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
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
德生BCL3000的电路分析和打磨
2021/03/02 无线电
dedecms 制作模板中使用的全局标记图文教程
2007/03/11 PHP
php array的学习笔记
2012/05/10 PHP
ThinkPHP3.1之D方法实例详解
2014/06/20 PHP
Laravel5.5 实现后台管理登录的方法(自定义用户表登录)
2019/09/30 PHP
在laravel框架中使用model层的方法
2019/10/08 PHP
通过JAVAScript实现页面自适应
2007/01/19 Javascript
jQuery参数列表集合
2011/04/06 Javascript
javascript开发技术大全-第1章javascript概述
2011/07/03 Javascript
JavaScript起点(严格模式深度了解)
2013/01/28 Javascript
JS网页播放声音实现代码兼容各种浏览器
2013/09/22 Javascript
使用GruntJS构建Web程序之构建篇
2014/06/04 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
2016/01/18 Javascript
BootStrap的table表头固定tbody滚动的实例代码
2016/08/24 Javascript
原生js实现中奖信息无间隙滚动效果
2017/01/18 Javascript
Node.js使用Express创建Web项目详细教程
2017/03/31 Javascript
Vue-Cli中自定义过滤器的实现代码
2017/08/12 Javascript
vue下跨域设置的相关介绍
2017/08/26 Javascript
Vue框架里使用Swiper的方法示例
2018/09/20 Javascript
postman自定义函数实现 时间函数的思路详解
2019/04/17 Javascript
python使用marshal模块序列化实例
2014/09/25 Python
用Python的pandas框架操作Excel文件中的数据教程
2015/03/31 Python
python求最大值最小值方法总结
2019/06/25 Python
python绘制多个子图的实例
2019/07/07 Python
3行Python代码实现图像照片抠图和换底色的方法
2019/10/10 Python
OpenCV+python实现膨胀和腐蚀的示例
2020/12/21 Python
HTTP状态码详解
2021/03/18 杂记
用纯css3实现的图片放大镜特效效果非常不错
2014/09/02 HTML / CSS
美国男装连锁零售商:Men’s Wearhouse
2016/10/14 全球购物
亚洲航空公司官方网站:AirAsia
2019/11/25 全球购物
实习生单位鉴定意见
2013/12/04 职场文书
2014财务年终工作总结
2014/12/08 职场文书
党员承诺书范文2015
2015/04/27 职场文书
为什么说餐饮很难做,是因为你不了解这些新规则
2019/08/20 职场文书
MySQL kill不掉线程的原因
2021/05/07 MySQL
【海涛解说】暗牧也疯狂,牛蛙成配角
2022/04/01 DOTA