首页
所有分类
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 相关文章推荐
下载文件个别浏览器文件名乱码解决办法
Mar 19 Javascript
js获取当前页面路径示例讲解
Jan 08 Javascript
jQuery中:hidden选择器用法实例
Dec 30 Javascript
JavaScript面对国际化编程时的一些建议
Jun 24 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
Jul 27 Javascript
jQuery侧边栏实现代码
May 06 Javascript
巧用Javascript的逻辑运算符
Dec 02 Javascript
原生js简单实现放大镜特效
May 16 Javascript
JavaScript中的事件与异常捕获详析
Feb 24 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
Apr 18 Javascript
vue3.0 搭建项目总结(详细步骤)
May 20 Javascript
vue 实现走马灯效果
Oct 28 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
74HC4066(1) AGC(1) 吸血鬼(1) 模拟人生(1) FS1016(1) 死亡搁浅(1) 原神(1) 大话西游(1) BCLer(1) 铁拳(1)
You might like
PHP初学者头疼问题总结
2006/07/08 PHP
PHP4 与 MySQL 数据库操作函数详解
2006/10/09 PHP
php查看session内容的函数
2008/08/27 PHP
PHP邮件群发机实现代码
2016/02/16 PHP
php微信浏览器分享设置以及回调详解
2016/08/01 PHP
PHP 二级子目录（后台目录）设置二级域名
2017/03/02 PHP
Smarty缓存机制实例详解【三种缓存方式】
2019/07/20 PHP
js继承的实现代码
2010/08/05 Javascript
javascript 防止刷新,后退,关闭
2010/08/07 Javascript
原生js实现改变随意改变div属性style的名称和值的结果
2013/09/26 Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
2014/05/22 Javascript
Webpack 实现 Node.js 代码热替换
2015/10/22 Javascript
微信小程序 数据访问实例详解
2016/10/08 Javascript
jquery利用json实现页面之间传值的实例解析
2016/12/12 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
2018/03/21 Javascript
JavaScript变量作用域及内存问题实例分析
2019/06/10 Javascript
Python使用百度API上传文件到百度网盘代码分享
2014/11/08 Python
Python中字典和JSON互转操作实例
2015/01/19 Python
教你用Python脚本快速为iOS10生成图标和截屏
2016/09/22 Python
Python 16进制与中文相互转换的实现方法
2018/07/09 Python
Python sklearn库实现PCA教程(以鸢尾花分类为例)
2020/02/24 Python
python源文件的字符编码知识点详解
2021/03/04 Python
使用iframe+postMessage实现页面跨域通信的示例代码
2020/01/14 HTML / CSS
PAUL HEWITT手表美国站：德国北部时尚生活配饰品牌，船锚元素
2017/11/18 全球购物
Java里面如何把一个Array数组转换成Collection, List
2013/07/26 面试题
高中生毕业自我鉴定
2013/10/10 职场文书
店长岗位职责
2013/11/21 职场文书
迟到检讨书2000字（精选篇）
2014/10/07 职场文书
2015年推普周活动总结
2015/03/27 职场文书
辞职信格式范文
2015/05/13 职场文书
文化苦旅读书笔记
2015/06/29 职场文书
接触艺术对孩子学习思维有益
2019/08/06 职场文书
PHP中strval()函数实例用法
2021/06/07 PHP
在 SQL 语句中处理 NULL 值的方法
2021/06/07 SQL Server
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/07 其他游戏
vue css 相对路径导入问题级踩坑记录
2022/06/05 Vue.js