首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JavaScript实现图片自动加载的瀑布流效果

Posted in Javascript onApril 11, 2016

先给大家展示下效果图：

JavaScript实现图片自动加载的瀑布流效果

　向下滑动网页的时候能够自动加载图片并显示。

盛放图片的盒子模型如下：

<div class="box">
<div class="box_img">
<img src="Img/8.jpg">
</div>
</div>

设置img-width为150px，然后box_img添加内边距和阴影效果，box的外边距为0，添加内边距。盒子的宽度是由img-width和边距撑开的。也就是说盒子之间是没有间距的，但是盒子内部有一些边距的效果。这样在js设置位置的时候就不用考虑边距问题，直接调用box的宽度就可以了。

设置盛放所有box的div的position为relative，这样在设置top值或是left值的时候，就不用考虑最外层的margin属性。

放置图片的位置：获得第一行图片的高度并且存放在数组里面，接下来的图片设置position为absolute，放置在高度最小的图片的下面，然后设置top和left，并且把数组的最小值加上新放置的图片的高度。也就是说HTML里面原始放置的图片除了第一行以外，其他的图片都是在js里面又重新定位的。

当滑动页面到底部的时候触发事件函数，紧接着放置一些图片，这样保证图片的无限加载。

HTML文件：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-">
<title></title>
<link rel="stylesheet" href="waterfall.css" type="text/css">
<script src="waterfall.js"></script>
</head>
<body>
<div id="content">
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box" >
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box" >
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box" >
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box" >
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
<div class="box" >
<div class="box_img">
<img src="Img/.jpg">
</div>
</div>
</div>
</body>
</html>

CSS文件：

*{
margin: ;
padding:;
}
#content{
position: relative;
background-color: #;
}
.box{
padding: px;
float: left;
}
.box_img{
padding: px;
border: px solid #cccccc;
box-shadow: px #cccccc;
border-radius: px;
}
img{
width: px;
height: auto;
}

　　js文件：

Math.floor()函数能够向下取整。

Math.min.apply(null,heightArr);函数能获得heightArr数组的最小值。

window.onscroll=function(){}；滑动页面的时候触发这个函数。

document.documentElement.clientHeight；浏览器显示出来的高度。

document.documentElement.scrollTop；滑动的距离。

/**
* Created by asua on 2016/4/9.
*/
window.onload=function(){
imgLocation("content","box");
var lodeImage={"Date":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src":"10.jpg"},]}
window.onscroll=function(){
if(checkFlag()){
for(var i=0;i<lodeImage.Date.length;i++){
var box=document.createElement("div");
box.className="box";
var cparent=document.getElementById("content");
cparent.appendChild(box);
var box_img=document.createElement("div");
box_img.className="box_img";
box.appendChild(box_img);
var img=document.createElement("img");
img.src="Img/"+lodeImage.Date[i].src;
box_img.appendChild(img);
}
imgLocation("content","box");
}
}
}
function checkFlag(){
var cparent=document.getElementById("content");
var ccontent=getChildElement(cparent,"box");
var lastContentHeight=ccontent[ccontent.length-1].offsetTop;
var scrollHeight=document.documentElement.scrollTop||document.body.scrollTop;
var pageHeight=document.documentElement.clientHeight||document.body.clientHeight;
console.log(lastContentHeight+":"+scrollHeight+":"+pageHeight);
if(lastContentHeight<scrollHeight+pageHeight){
return true;
}
}
function imgLocation(parent,child){
var cparent=document.getElementById(parent);
var ccontent=getChildElement(cparent,child);
var imgwidth=ccontent[0].offsetWidth;
var cols=Math.floor(document.documentElement.clientWidth/imgwidth);
cparent.style.cssText="width:"+imgwidth*cols+"px;margin:30px auto";
var heightArr=[];
for(var i=0;i<ccontent.length;i++){
if(i<cols){
heightArr.push(ccontent[i].offsetHeight);
}else{
var minHeight=Math.min.apply(null,heightArr);
var minIndex=getMinIndex(heightArr,minHeight);
ccontent[i].style.position="absolute";
ccontent[i].style.top=minHeight+"px";
ccontent[i].style.left=ccontent[minIndex].offsetLeft+"px";
heightArr[minIndex]+=ccontent[i].offsetHeight;
}
}
}
function getMinIndex(heightArr,minHeight){
for(var i=0;i<heightArr.length;i++){
if(heightArr[i]==minHeight){
return i;
}
}
}
function getChildElement(parent,content){
var contentArr=[];
var allcontent=parent.getElementsByTagName("*");
for(var i=0;i<allcontent.length;i++){
if(allcontent[i].className==content){
contentArr.push(allcontent[i]);
}
}
return contentArr;
}

好了，关于js实现图片自动加载的瀑布流效果代码到此给大家介绍完了，希望对大家有所帮助！

JavaScript实现图片自动加载的瀑布流效果

- Author -

辉子t1

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript 比较时间大小的代码
Apr 24 Javascript
JS求平均值的小例子
Nov 29 Javascript
JavaScript观察者模式(经典)
Dec 09 Javascript
js实现的页面矩阵图形变换特效
Jan 26 Javascript
JS小数运算出现多为小数问题的解决方法
Jun 02 Javascript
AngularJS 2.0入门权威指南
Oct 08 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
Mar 31 Javascript
jsTree事件和交互以及插件plugins详解
Aug 29 Javascript
JavaScript+CSS相册特效实例代码
Sep 07 Javascript
一步步教会你微信小程序的登录鉴权
Apr 09 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
Jul 19 Javascript
解决vue 退出动画无效的问题
Aug 09 Javascript
javascript冒泡排序小结
Apr 10 #Javascript
javascript原生ajax写法分享
Apr 10 #Javascript
Javascript实现苹果悬浮虚拟按钮
Apr 10 #Javascript
jQuery实现点击水纹波动动画
Apr 10 #Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
Apr 08 #Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
Apr 08 #Javascript
JavaScript代码实现左右上下自动晃动自动移动
Apr 08 #Javascript
hook(1) cudnn(1) RTX 3050 ti(1) cudn(1) 热力图(1) 脚本(1) dict(1) 字符画(1) callback(1) Git(3)
You might like
社区(php&amp;&amp;mysql)二
2006/10/09 PHP
PHP-Fcgi下PHP的执行时间设置方法
2013/08/02 PHP
关于laravel 数据库迁移中integer类型是无法指定长度的问题
2019/10/09 PHP
Javascript写了一个清除“logo1_.exe”的杀毒工具（可扫描目录）
2007/02/09 Javascript
离开页面时检测表单元素是否被修改,提示保存的js代码
2010/08/25 Javascript
AJAX 网页保留浏览器前进后退等功能
2011/02/12 Javascript
动态创建样式表在各浏览器中的差异测试代码
2011/09/13 Javascript
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
2013/06/09 Javascript
Windows系统中安装nodejs图文教程
2015/02/28 NodeJs
js实时获取并显示当前时间的方法
2015/07/31 Javascript
js格式化时间的方法
2015/12/18 Javascript
bootstrap实现的自适应页面简单应用示例
2017/03/09 Javascript
微信小程序之购物车功能
2020/09/23 Javascript
React中的refs的使用教程
2018/02/13 Javascript
JS实现获取进今年第几天是周几的方法分析
2018/06/27 Javascript
浅谈Angular6的服务和依赖注入
2018/06/27 Javascript
js实现时钟定时器
2020/03/26 Javascript
python实现的jpg格式图片修复代码
2015/04/21 Python
python截取两个单词之间的内容方法
2018/12/25 Python
Python3中函数参数传递方式实例详解
2019/05/05 Python
Python 日期区间处理 (本周本月上周上月...)
2019/08/08 Python
pymysql的简单封装代码实例
2020/01/08 Python
Python @property原理解析和用法实例
2020/02/11 Python
Spring Boot中使用IntelliJ IDEA插件EasyCode一键生成代码详细方法
2020/03/20 Python
对Python 字典元素进行删除的方法
2020/07/31 Python
Python使用urlretrieve实现直接远程下载图片的示例代码
2020/08/17 Python
html5使用canvas画空心圆与实心圆
2014/12/15 HTML / CSS
Ajax主要包含了哪些技术
2014/06/12 面试题
基于Python 函数和方法的区别说明
2021/03/24 Python
高级方案规划工程师岗位职责
2013/11/29 职场文书
会计专业的自荐信
2013/12/12 职场文书
公司庆典活动邀请函
2014/01/09 职场文书
技术负责人任命书
2014/06/05 职场文书
汉语言文学专业求职信
2014/06/19 职场文书
用Python将库打包发布到pypi
2021/04/13 Python
Python使用Kubernetes API访问集群
2021/05/30 Python