Js的图片瀑布流
瀑布流
过程：
- 创建一个放所有图片的模块bigblock。
- 获取这个大模块，追加一个子元素块来放小图。
- 封装一个函数list(n)来存放50张图片，并且将每张图追加放入空数组ele[]中。
- 封装一个函数set_position（），来确定每个图片的位置，用到了offsetHeight，offsetTop，offsetWidth等属性，同时给最大块也设置动态的高度，随着加载的图片数量增多，最大块的高度也随着增高。
- 使用 window.onload事件，加载图片更方便。
- 给浏览器的滚动条添加事件，让滚动条滑到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>
<p class="bigblock">
</p>
<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("p");
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>
图片不是动图，看不出什么效果，但代码都是正确的，小伙伴可以试一试。
如何打造一款广为流传的爆款产品？
爆款的打造，关键在于找到引爆的那根导火索，并点燃它，让线性的传播升级为网状，从而在短时间内吸引大量关注。流行和爆款，是每个产品都渴
流光字，PS彩虹横刷渲染字
用流量宝刷单有用吗?靠谱吗？
淘宝刷单属于老生常谈的话题了，现在豌豆资源网宝店学会的第一件事情就是刷单，几乎是关于淘宝的一切都能刷，流量、人气、销量、淘宝收
运营分析：朋友圈集赞引流，用户裂变的经典套路
众所周知，微信有很多流量洼地，公众号、微信群、小程序、朋友圈，每天都要从它们身上获得流量，实现用户增长。请问，它们中的哪个属于真正
微信5.4，愈发膨胀的终极流量入口野心
浓缩观点微信新版中，我们可以明显感觉到微信越来越庞大的生态完整版图，我们看到了一直以来与阿里巴巴支付宝直面竞争的移动支付，还看
文章回顾
大家看了本文Js的图片瀑布流的精彩教程资源内容，是不是对Js的图片瀑布流了解更多，真心希望Js的图片瀑布流能帮助到你， 小编会一直给你带来更多教程资源文章信息。
版权声明： 发表于 2020-01-13 2:56:59。
本文由第三方用户分享仅代表作者观点，不代表本网站立场，秉承互联网开放分享的精神，目的在于传递更多信息，加强各行业互通交流，但对内容不作任何保证或承诺，请读者自行参考斟酌。网站发布的信息(包含但不限于版式、图片、字体、文章等素材)由第三方用户分享，版权归原作者所有，本站不承担任何相关的版权纠纷等相关责任。如您认为本篇内容侵犯了您的权益，请与我们联系，我们会及时处理。
百科塔让百科知识为更多人带来价值。
转载请注明： 本文标题：Js的图片瀑布流 本文地址：https://www.bktl.cn/43520.html