前两天通过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>
<div id="container">
<div class="box">
<div class="boximg">
<img src="images/11.jpg" alt="">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="images/12.jpg" alt="">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="images/13.jpg" alt="">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="images/14.jpg" alt="">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="images/15.jpg" alt="">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="images/16.jpg" alt="">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="images/17.jpg" alt="">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="images/18.jpg" alt="">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="images/19.jpg" alt="">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="images/20.jpg" alt="">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="images/21.jpg" alt="">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="images/22.jpg" alt="">
</div>
</div>
</div>
</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("div");
ccontent.className="box";
cparent.appendChild(ccontent);
var boximg = document.createElement("div");
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<cols) {
boxHeightArr[i] = ccontent[i].offsetHeight;
}
else{
var minheight = Math.min.apply(null,boxHeightArr);
var minIndex = getminheightLocation(boxHeightArr,minheight);
ccontent[i].style.position = "absolute";
ccontent[i].style.top = minheight+"px";
ccontent[i].style.left = ccontent[minIndex].offsetLeft+"px";
boxHeightArr[minIndex] = boxHeightArr[minIndex]+ccontent[i].offsetHeight;
}
}
}
function getminheightLocation(boxHeightArr,minheight){
for (var i in boxHeightArr) {
if (boxHeightArr[i] == minheight) {
return i;
}
}
}
//将parent下的所有类名为content的div存储在自定义的数组contentArr中
function getChildElement(parent,content){
var contentArr = [];
var allcontent = parent.getElementsByTagName("*");
//获取所有内容,返回的是一个dom对象可以遍历,有length属性,但不是数组。
for (var i = 0; i < allcontent.length; i++) {
if (allcontent[i].className == content) {
contentArr.push(allcontent[i]);//向数组contentArr末尾进行追加content
}
}
return contentArr;
}