javascript实现瀑布流动态加载图片原理


Posted in Javascript onAugust 12, 2016

本文实例为大家分享了js瀑布流加载效果,动态加载图片,供大家参考,具体内容如下

鼠标滚动事件,当鼠标滚动到下边,动态加载图片。

1. HTML代码    

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>js实现瀑布流效果-动态加载图片</title>
  <link rel="stylesheet" href="css/waterfallflow.css" type="text/css" />
  <script src="js/waterfallflow.js"></script>
 </head>
 <body>
  <div id="container">
   <div class="box">
    <div class="box_img">
     <img src="img/1.jpg" />
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/2.jpg" />
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/3.jpg" />
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/4.jpg" />
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/5.jpg" />
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/6.jpg" />
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/7.jpg" />
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/3.jpg" />
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/1.jpg" />
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/2.jpg" />
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/1.jpg" />
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/2.jpg" />
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/3.jpg" />
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/4.jpg" />
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/5.jpg" />
    </div>
   </div>
   <div class="box">
    <div class="box_img">
     <img src="img/6.jpg" />
    </div>
   </div>
    
  </div>
 </body>
</html>

2. CSS代码    

*{
 margin: 0px;
 padding: 0px;
}
#container{
 position: relative;
}
.box{
 padding: 5px;
 float: left;
 margin: 0px auto;
}
.box_img{
 padding: 5px;
 border: 1px solid #DCDCDC;
 box-shadow: 0 0 5px #ccc;
 border-radius: 5px;
}
.box_img img{
 width: 230px;
}

3. JavaScript代码    

window.onload=function(){
  
 imgLocation("container","box");
 var imgData={"data":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"}]}
 window.onscroll=function(){
//  console.log(document.documentElement.scrollTop);
  if(checkFlag()){
   var cparent=document.getElementById("container");
   for(var i=0;i<imgData.data.length;i++){
    var ccontent=document.createElement("div");
    ccontent.className="box";
    cparent.appendChild(ccontent);
    var boximg=document.createElement("div");
    boximg.className="box_img";
    ccontent.appendChild(boximg);
    var img=document.createElement("img");
    img.src="img/"+imgData.data[i].src;
    boximg.appendChild(img);
     
    //另外一种方法在div后边追加内容,不覆盖原有内容
//    var content="<div class='box'><div class='box_img'><img src='img/"+imgData.data[i].src+"'/></div></div>";
//    cparent.innerHTML+=content;
   }
   imgLocation("container","box");
  }
 }
}
 
function checkFlag(){
 var cparent=document.getElementById("container");
 var ccontent=getChildElement(cparent,"box");//图片的所有box数
 var lastContentHeight=ccontent[ccontent.length-1].offsetTop;//最后一张图片距离顶部高度
 var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//滚动条距离顶部高度
 var pageHeight=document.documentElement.clientHeight||document.body.clientHeight;//屏幕高度
// console.log(lastContentHeight+","+scrollTop+","+pageHeight);
 if(lastContentHeight<scrollTop+pageHeight){
  return true;
 }
}
 
function imgLocation(parent,content){
 var cparent=document.getElementById(parent);
 var ccontent=getChildElement(cparent,content);//图片的所有box数
 var imgWidth=ccontent[0].offsetWidth;//图片宽度
 var num=Math.floor(document.documentElement.clientWidth/imgWidth);//一行放图片个数
 cparent.style.cssText="width:"+imgWidth*num+"px;margin:0px auto";//container的宽度
 var boxHeightArr=[];//每一列box高度
 for(var i=0;i<ccontent.length;i++){
  if(i<num){
   boxHeightArr[i]=ccontent[i].offsetHeight;
  }else{
   var minHeight=Math.min.apply(null,boxHeightArr);//最小高度
   var minIndex = getMinheightLocation(boxHeightArr,minHeight);//得到最小高度下标
//   console.log(minHeight+","+minIndex);
   ccontent[i].style.position="absolute";
   ccontent[i].style.top=minHeight+"px";//距离顶部高度
   ccontent[i].style.left=ccontent[minIndex].offsetLeft+"px";//距离左边长度
   boxHeightArr[minIndex]+=ccontent[i].offsetHeight;
//   console.log(ccontent[i].offsetHeight+","+ccontent[i].height);//ccontent[i].height=undefined
    
  }
 }
}
 
function getMinheightLocation(boxHeightArr,minHeight){
 for(var i in boxHeightArr){
  if(boxHeightArr[i]==minHeight){
   return i
  }
 }
}
 
function getChildElement(parent,content){
 //将parent下有content的全部取出
 var contentArr=[];
 var allContent=parent.getElementsByTagName("*");
 for(i=0;i<allContent.length;i++){
  if(allContent[i].className=="box"){
   contentArr.push(allContent[i]);
  }
 }
 return contentArr;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
SyntaxHighlighter代码加色使用方法
Sep 07 Javascript
javascript 密码强弱度检测万能插件
Feb 25 Javascript
JavaScript Object的extend是一个常用的功能
Dec 02 Javascript
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
Mar 23 Javascript
jquery获取html元素的绝对位置和相对位置的方法
Jun 20 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
Feb 04 Javascript
JS事件添加和移出的兼容写法示例
Jun 20 Javascript
js控制按钮,防止频繁点击响应的实例
Feb 15 Javascript
整理关于Bootstrap表单的慕课笔记
Mar 29 Javascript
如何解决jQuery 和其他JS库的冲突
Jun 22 jQuery
Nuxt配置Element-UI按需引入的操作方法
Jul 06 Javascript
深入讲解Vue中父子组件通信与事件触发
Mar 22 Vue.js
jquery实现垂直和水平菜单导航栏
Aug 27 #Javascript
JS实现图片剪裁并预览效果
Aug 12 #Javascript
JS数组去掉重复数据只保留一条的实现代码
Aug 11 #Javascript
分享JS数组求和与求最大值的方法
Aug 11 #Javascript
利用JavaScript阻止表单提交的两种方法
Aug 11 #Javascript
防止Node.js中错误导致进程阻塞的办法
Aug 11 #Javascript
JavaScript中 ES6 generator数据类型详解
Aug 11 #Javascript
You might like
php批量缩放图片的代码[ini参数控制]
2011/02/11 PHP
PHP5各个版本的新功能和新特性总结
2014/03/16 PHP
对php 判断http还是https,以及获得当前url的方法详解
2019/01/15 PHP
实例讲解php将字符串输出到HTML
2019/01/27 PHP
js几秒以后倒计时跳转示例
2013/12/26 Javascript
jquery获取tr并更改tr内容示例代码
2014/02/13 Javascript
jQuery中detach()方法用法实例
2014/12/25 Javascript
JavaScript生成随机数的4种自定义函数分享
2015/02/28 Javascript
js正则表达式匹配数字字母下划线等
2015/04/14 Javascript
js+html5实现的自由落体运动效果代码
2016/01/28 Javascript
Javascript基础_标记文字的实现方法
2016/06/14 Javascript
详解JavaScript权威指南之对象
2016/09/27 Javascript
用AngularJS来实现监察表单按钮的禁用效果
2016/11/02 Javascript
微信小程序本作用域下调用全局JS详解及实例
2017/02/22 Javascript
jquery拖动改变div大小
2017/07/04 jQuery
jQuery上传插件webupload使用方法
2017/08/01 jQuery
JavaScript this指向相关原理及实例解析
2020/07/10 Javascript
Vue中添加滚动事件设置的方法详解
2020/09/14 Javascript
vue-amap根据地址回显地图并mark的操作
2020/11/03 Javascript
[01:04:35]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第一场
2018/04/04 DOTA
python利用datetime模块计算程序运行时间问题
2020/02/20 Python
浅析Python面向对象编程
2020/07/10 Python
详解HTML5中的Communication API基本使用方法
2016/01/29 HTML / CSS
Banggood官网:面向全球客户的综合商城
2017/04/19 全球购物
护理专业毕业生自我鉴定
2013/10/08 职场文书
计算机应用专业推荐信
2013/11/13 职场文书
周鸿祎:教你写创业计划书
2013/12/30 职场文书
《珍珠泉》教学反思
2014/02/20 职场文书
技术合作协议书范本
2014/04/18 职场文书
融资租赁计划书
2014/04/29 职场文书
机关干部三严三实心得体会
2014/10/13 职场文书
手机销售员岗位职责
2015/04/11 职场文书
实习报告范文之电话客服岗位
2019/07/26 职场文书
Python爬虫之爬取二手房信息
2021/04/27 Python
Redis字典实现、Hash键冲突及渐进式rehash详解
2021/09/04 Redis
如何Tomcat中使用ipv6地址
2022/05/06 Servers