编程 Javascript

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

Posted in Javascript onApril 11, 2016

先给大家展示下效果图：

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

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

<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 DOM 编程艺术》读书笔记之JavaScript 图片库

Jan 09 Javascript

JavaScript实现的类字典插入或更新方法实例

Jul 10 Javascript

七夕情人节丘比特射箭小游戏

Aug 20 Javascript

jQuery validate插件功能与用法详解

Dec 15 Javascript

javascript数组去重方法分析

Dec 15 Javascript

Bootstrap Scrollspy源码学习

Mar 02 Javascript

vue拦截器Vue.http.interceptors.push使用详解

Apr 22 Javascript

jQuery实现动态生成年月日级联下拉列表示例

May 11 jQuery

Vue如何使用混合Mixins和插件开发详解

Feb 05 Javascript

微信小程序获取手机号 JavaScript解密示例代码详解

May 14 Javascript

详解ES6中class的实现原理

Oct 03 Javascript

vue实现顶部菜单栏

Nov 08 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

You might like

设置php页面编码的两种方法示例介绍

2014/03/03 PHP

Javascript实现真实字符串剩余字数提示的实例代码

2013/10/22 Javascript

jQuery 获取兄弟元素的几种不错方法

2014/05/23 Javascript

node.js中的http.createServer方法使用说明

2014/12/14 Javascript

AngularJS基础知识笔记之过滤器

2015/05/10 Javascript

jquery select2的使用心得(推荐)

2016/12/04 Javascript

iOS + node.js使用Socket.IO框架进行实时通信示例

2017/04/14 Javascript

Three.js利用dat.GUI如何简化试验流程详解

2017/09/26 Javascript

解决webpack无法通过IP地址访问localhost的问题

2018/02/22 Javascript

webpack4.x开发环境配置详解

2018/08/04 Javascript

webpack DllPlugin xxx is not defined解决办法

2019/12/13 Javascript

NUXT SSR初级入门笔记(小结)

2019/12/16 Javascript

JS前端模块化原理与实现方法详解

2020/03/17 Javascript

记录一次websocket封装的过程

2020/11/23 Javascript

JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法

2021/01/29 Javascript

Django查找网站项目根目录和对正则表达式的支持

2015/07/15 Python

TensorFlow用expand_dim()来增加维度的方法

2018/07/26 Python

django框架事务处理小结【ORM 事务及raw sql,customize sql 事务处理】

2019/06/27 Python

解决pycharm 工具栏Tool中找不到Run manager.py Task的问题

2019/07/01 Python

python文件读写代码实例

2019/10/21 Python

Python matplotlib画图时图例说明(legend)放到图像外侧详解

2020/05/16 Python

详解tf.device()指定tensorflow运行的GPU或CPU设备实现

2021/02/20 Python

使用before和:after伪类制作css3圆形按钮

2014/04/08 HTML / CSS

详解CSS3浏览器兼容

2016/12/14 HTML / CSS

HTML5 图片预加载的示例代码

2020/03/25 HTML / CSS

奥地利婴儿用品和玩具购物网站：baby-markt.at

2020/01/26 全球购物

Ariat英国官网：为世界顶级马术运动员制造最优质的鞋类和服装

2020/02/14 全球购物

什么是WEB控件？使用WEB控件有哪些优势？

2012/01/21 面试题

大学生职业生涯规划书模板

2014/01/18 职场文书

个人简历中自我评价

2014/02/11 职场文书

《花的勇气》教后反思

2014/02/12 职场文书

暑期实践个人总结

2015/03/06 职场文书

2015学校师德师风工作总结

2015/04/22 职场文书

家庭教育教师培训学习体会

2016/01/14 职场文书

深度学习小工程练习之垃圾分类详解

2021/04/14 Python

Nginx开源可视化配置工具NginxConfig使用教程

2022/06/21 Servers