原生JS代码实现瀑布流效果
程序员文章站
2022-04-25 19:55:34
前两天通过b站在极客学院学习了js动态瀑布流效果：主要是html+css控制样式，通过js实现全局瀑布流样式，以及通过访问自定义的json字符串，实现图片无限加载；现对其代码进行整理，供日后学习参考...
前两天通过b站在极客学院学习了js动态瀑布流效果：主要是html+css控制样式，通过js实现全局瀑布流样式，以及通过访问自定义的json字符串，实现图片无限加载；现对其代码进行整理，供日后学习参考。
html代码部分：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1">
<title>瀑布流</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="css/style.css" rel="stylesheet">
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
</head>
<body>
<p id="container">
<p class="box">
<p class="boximg">
<img src="images/11.jpg" alt="">
</p>
</p>
<p class="box">
<p class="boximg">
<img src="images/12.jpg" alt="">
</p>
</p>
<p class="box">
<p class="boximg">
<img src="images/13.jpg" alt="">
</p>
</p>
<p class="box">
<p class="boximg">
<img src="images/14.jpg" alt="">
</p>
</p>
<p class="box">
<p class="boximg">
<img src="images/15.jpg" alt="">
</p>
</p>
<p class="box">
<p class="boximg">
<img src="images/16.jpg" alt="">
</p>
</p>
<p class="box">
<p class="boximg">
<img src="images/17.jpg" alt="">
</p>
</p>
<p class="box">
<p class="boximg">
<img src="images/18.jpg" alt="">
</p>
</p>
<p class="box">
<p class="boximg">
<img src="images/19.jpg" alt="">
</p>
</p>
<p class="box">
<p class="boximg">
<img src="images/20.jpg" alt="">
</p>
</p>
<p class="box">
<p class="boximg">
<img src="images/21.jpg" alt="">
</p>
</p>
<p class="box">
<p class="boximg">
<img src="images/22.jpg" alt="">
</p>
</p>
</p>
</body>
</html>
css代码部分
@charset "utf-8";
/**
*
* @authors zhanghe-v (807597850@qq.com)
* @date 2018-06-11 20:12:16
* @version $1.0$
*/
*{
padding: 0px;
margin: 0px;
}
#container{
position: relative;
}
.box{
padding: 5px;
float: left;
}
.boximg{
padding: 5px;
border: 1px solid #595959ff;
box-shadow: 0 0 5px #ccc; /*阴影效果*/
border-radius: 5px;/*圆角效果*/
}
.boximg img{
width: 200px;
height: auto;
}
js代码部分
/**
*
* @authors zhanghe-v (807597850@qq.com)
* @date 2018-06-11 20:23:17
* @version $1.0$
*/
window.onload = function(){
imglocation("container","box")
var imgdata = {"data":[
{"src":"11.jpg"},
{"src":"12.jpg"},
{"src":"13.jpg"},
{"src":"14.jpg"},
{"src":"15.jpg"},
{"src":"16.jpg"},
{"src":"17.jpg"},
{"src":"18.jpg"},
{"src":"19.jpg"},
{"src":"20.jpg"},
{"src":"21.jpg"},
{"src":"22.jpg"},]}
window.onscroll = function(){
if (checkflag()) {
var cparent = document.getelementbyid("container");
for (var i = 0; i < imgdata.data.length; i++) {
var ccontent = document.createelement("p");
ccontent.classname="box";
cparent.appendchild(ccontent);
var boximg = document.createelement("p");
boximg.classname="boximg";
ccontent.appendchild(boximg);
var img = document.createelement("img");
img.src = "images/"+imgdata.data[i].src;
boximg.appendchild(img);
}
imglocation("container","box");
}
}
}
function checkflag(){
var cparent = document.getelementbyid("container");
var ccontent = getchildelement(cparent,"box");
var lastcontentheight = ccontent[ccontent.length-1].offsettop;
var scrolltop = document.documentelement.scrolltop||document.body.scrolltop;
var pageheight = document.documentelement.clientheight||document.body.clientheight;
if (lastcontentheight<(scrolltop+pageheight)) {
return true;
}
console.log(lastcontentheight+","+scrolltop+","+pageheight);
}
function imglocation(parent,content){
//将parent下所有的content全部取出
var cparent = document.getelementbyid(parent);
var ccontent = getchildelement(cparent,content);
var imgwidth = ccontent[0].offsetwidth;
//获得每一行显示图片的个数
var cols = math.floor(document.documentelement.clientwidth / imgwidth);
//设置父容器container的宽度，并设置样式居中
cparent.style.csstext = "width:"+imgwidth*cols+"px;margin:0 auto";
var boxheightarr = [];
for (var i = 0; i < ccontent.length; i++) {
if (i