JS实现图片瀑布流效果
更新时间：2021年09月17日 12:01:29 作者：fanfan_h
这篇文章主要为大家详细介绍了JS实现图片瀑布流，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JS实现图片瀑布流的具体代码，供大家参考，具体内容如下
过程：
1、创建一个放所有图片的模块bigblock。
2、获取这个大模块，追加一个子元素块来放小图。
3、封装一个函数list(n)来存放50张图片，并且将每张图追加放入空数组ele[]中。
4、封装一个函数set_position（），来确定每个图片的位置，用到了offsetHeight，offsetTop，offsetWidth等属性，同时给最大块也设置动态的高度，随着加载的图片数量增多，最大块的高度也随着增高。
5、使用 window.onload事件，加载图片更方便。
6、给浏览器的滚动条添加事件，让滚动条滑到body的可视区域最底部以上10px 时，加载出新的30张图片，并且每次滚动条停留在到刚加载的图片位置。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>photo瀑布流</title>
<style>
*{
margin:0;
padding:0;
}
body{
/* background: #ebebeb;*/
background: url(./img/bging2.jpg );
background-size:100% ;
height:100%;
}
.bigblock {
position: relative;
width:650px;
min-height: 200px;
background: #fff;
margin:auto;
}
.smallblock{
position:absolute;
width:100px;
border-radius:5px ;
box-shadow: 0 0 7px #89c8eb;
box-sizing: border-box;
overflow: hidden;
}
.photo{
width:100%;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="bigblock">
</div>
<script>
var Big=document.getElementsByClassName ("bigblock")[0];
var ele=[];
var num=6;
var bghight=0;
var start=0;
var image_img=["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "9.jpg", "10.jpg","11.jpg","12.jpg","13.jpg","14.jpg","15.jpg","16.jpg","17.jpg"];
for(var i=0;i<50;i++){
list();
}
function list(n){
var small=document.createElement("div");
var image=document.createElement("img");
small.className="smallblock";
image.className="photo";
image.src="./img/"+image_img[parseInt(Math.random()* image_img.length)]; //0-12
ele.push(small);
Big.appendChild(small);
small.appendChild (image);
}
function set_position(){
for(var i=start;i<ele.length;i++){
//设置每张图片的位置
var settop=i <num ? 0: ele[i-num].offsetHeight +10 + ele[i-num].offsetTop ;
ele[i].style.top=settop+"px";
var setleft = i %num * ele[i].offsetWidth + (i % num) * 10;
ele[i].style.left=setleft+"px";
//获取背景的高度
bghight =(ele[i].offsetHeight +ele[i].offsetTop)>bghight ? ele[i].offsetHeight +ele[i].offsetTop :bghight ;
Big.style.height =bghight +"px";
}
}
window.onload=function(){
set_position();
//添加浏览器的滚动条事件
this.addEventListener ("scroll",function(){
var b_height=document.body.clientHeight;
if(parseInt (this.pageYOffset+ this.innerHeight ) > b_height-10 ){
start =ele.length;
for(i=0;i<30;i++){
list();
}
set_position ();
}
// console.log(b_height); //body的可视高度，可变
// console.log(this.pageYOffset); //滚动条的上偏移量
// console.log(this.innerHeight); //浏览器可视区域的高
})
}
</script>
</body>
</html>
图片不是动图，看不出什么效果，但代码都是正确的，小伙伴可以试一试。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了微信小程序的授权实现过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-08-08
这篇文章主要介绍了javascript笛卡尔积算法实现方法,实例分析了笛卡尔积算法的javascript实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-04-04
这篇文章主要介绍了JS实现的简单四则运算计算器功能,涉及javascript事件响应及数值运算相关操作技巧,需要的朋友可以参考下2017-09-09
这篇文章主要介绍了Ajax请求时无法重定向的问题解决代码详解，当使用Ajax请求时，如果后台进行重定向到其他页面时是无法成功的，只能在浏览器地址栏输入才能够实现重定向。下面我们来看看解决方法吧2019-06-06
在分析这个问题之前，我们需了解什么是按值传递(call by value)，什么是按引用传递(call by reference)。在计算机科学里，这个部分叫求值策略(Evaluation Strategy)。它决定变量之间、函数调用时实参和形参之间值是如何传递的。2015-01-01
使用webpack打包后,图片没有加载出来,页面空白,报错图片引用的路径不对,本文给大家介绍webpack 打包后图片加载报错的解决办法,感兴趣的朋友一起看看吧2024-03-03
JavaScript是一门动态类型语言,元素除了表示存在的空值外,还有可能根本就不存在,这就是undefined存在的原因,这篇文章主要给大家介绍了关于undefined和null区别的相关资料,需要的朋友可以参考下2022-03-03
这篇文章主要为大家详细介绍了Javascript数组常用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助2022-02-02
这篇文章主要介绍了javascript实现控制的多级下拉菜单，包含示例代码，效果非常不错，这里推荐给大家。2015-07-07
这篇文章主要介绍了使用swiper自定义分页点击跳转指定页面方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
最新评论