首页
所有分类
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 相关文章推荐
基于jquery的滚动新闻列表
Jun 19 Javascript
javascript初学者常用技巧
Sep 02 Javascript
javascript实现判断鼠标的状态
Jul 10 Javascript
js 调用百度分享功能
Feb 27 Javascript
AngularJS中的拦截器实例详解
Apr 07 Javascript
基于Axios 常用的请求方法别名(详解)
Mar 13 Javascript
VUE 实现滚动监听 导航栏置顶的方法
Sep 11 Javascript
详解如何制作并发布一个vue的组件的npm包
Nov 10 Javascript
微信小程序自定义toast的实现代码
Nov 16 Javascript
JS数组扁平化(flat)方法总结详解
Jun 24 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
Nov 04 Javascript
bootstrap实现tab选项卡切换
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
演讲稿(869) 介绍信(57) 心得体会(660) 表扬信(62) 创业计划书(312) 道歉信(39) 职业生涯规划书(234) 证婚词(21) 思想汇报(404) 欢迎词(65)
You might like
php下Memcached入门实例解析
2015/01/05 PHP
Javascript - HTML的request类
2006/07/15 Javascript
JS限制上传图片大小不使用控件在本地实现
2012/12/19 Javascript
关于JavaScript与HTML的交互事件
2013/04/12 Javascript
jquery实现metro效果示例代码
2013/09/06 Javascript
jquery获取子节点和父节点的示例代码
2013/09/10 Javascript
IE8下Jquery获取select选中的值post到后台报错问题
2014/07/02 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
2015/06/04 Javascript
简介JavaScript中的setHours()方法的使用
2015/06/11 Javascript
js实现对table的增加行和删除行的操作方法
2016/10/13 Javascript
浅谈基于Vue.js的移动组件库cube-ui
2017/12/20 Javascript
vue使用map代替Aarry数组循环遍历的方法
2020/04/30 Javascript
[04:53]DOTA2英雄基础教程 祈求者
2014/01/03 DOTA
[34:56]Ti4冒泡赛LGD vs Liquid 1
2014/07/14 DOTA
Python tempfile模块学习笔记（临时文件）
2014/05/25 Python
Python socket.error: [Errno 98] Address already in use的原因和解决方法
2014/08/25 Python
浅谈python中set使用
2016/06/30 Python
python模块之sys模块和序列化模块(实例讲解)
2017/09/13 Python
windows下python和pip安装教程
2018/05/25 Python
python递归实现快速排序
2018/08/18 Python
PyTorch实现重写/改写Dataset并载入Dataloader
2020/07/14 Python
Python如何执行精确的浮点数运算
2020/07/31 Python
selenium3.0+python之环境搭建的方法步骤
2021/02/01 Python
CSS3轻松实现圆角效果
2017/11/09 HTML / CSS
OPPO手机官方商城：中国手机市场出货量第一品牌
2017/10/18 全球购物
2014年三八妇女节活动方案
2014/02/28 职场文书
教师考核评语
2014/04/28 职场文书
青春无悔演讲稿
2014/05/08 职场文书
森林病虫害防治方案
2014/06/02 职场文书
2014大四本科生自我鉴定总结
2014/10/04 职场文书
2014年公务员转正工作总结
2014/11/07 职场文书
作文批改评语
2014/12/25 职场文书
农民工工资保障承诺书
2015/05/04 职场文书
幼儿园语言教学反思
2016/02/23 职场文书
确保减税降费落地生根，用实实在在措施
2019/07/19 职场文书
mybatis使用oracle进行添加数据的方法
2021/04/27 Oracle