瀑布流效果
这几天看js视频的时候学到一个用原生js实现瀑布流的方法。虽然代码有点难以理解，但多看几遍实际操作一下还是有点意思。存个档
- HTML部分代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js瀑布流</title>
<link rel="stylesheet" href="css/index.css">
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<!-- 存放图片的容器 -->
<div id="container">
<!-- 用来承载图片大小的盒子 -->
<div class="box">
<!-- 具体引入图片资源的div -->
<div class="box_img">
<img src="images/科比1.jpg" >
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/科比2.jpg" >
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/科比3.jpg" >
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/科比4.jpg" >
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/科比5.jpg" >
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/科比6.jpg" >
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/科比7.jpg" >
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/科比8.jpg" >
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/科比9.jpg" >
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/科比1.jpg" >
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/科比2.jpg" >
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/科比3.jpg" >
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/科比4.jpg" >
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/科比5.jpg" >
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/科比6.jpg" >
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/科比7.jpg" >
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/科比8.jpg" >
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/科比9.jpg" >
</div>
</div>
</div>
</body>
</html>
- css部分代码
* {
margin: 0px;
padding: 0px;
}
#container {
position: relative;
}
.box {
padding: 5px; /*每张图片的padding为5px，两张图片间的padding为10px*/
float: left;
}
.box_img {
padding: 5px;
border: 1px solid #cccccc;
box-shadow: 0 0 5px #ccc; /*设置阴影效果*/
border-radius: 5px;
}
.box_img img {
width: 200px; /*让所有图片宽度为200px，高度为自适应，这样可以避免图片变形*/
height: auto;
}
- js部分代码
// 加载函数，获得屏幕有多少个图片
window.onload = function(){
// 调用imgLocation函数
imgLocation("container","box");
//正常获取数据的方式是通过服务器获取，在此我们仅采用传入json数据的方式加载图片
//定义json字符串，进行模拟数据
var imgData = {"data":[{"src":"科比1.jpg"},{"src":"科比3.jpg"},{"src":"科比9.jpg"},{"src":"科比5.jpg"},{"src":"科比7.jpg"},{"src":"科比6.jpg"}]};
//监听滚动条
window.onscroll = function(){
//如果checkFlag()函数返回true则执行加载工作
if(checkFlag()){
//得到当前根元素然后动态的给它加载子元素
var c_parent =document.getElementById("container");
for(var i=0;i<imgData.data.length;i++){
//创建类名为box的div，将其挂载在根元素下
var c_content = document.createElement("div");
c_content.className = "box";
c_parent.appendChild(c_content);
//创建类名为box_img的div，将其挂载在父元素下
var boximg = document.createElement("div");
boximg.className = "box_img";
c_content.appendChild(boximg);
var img = document.createElement("img");
img.src = "images/"+imgData.data[i].src;
boximg.appendChild(img);
}
imgLocation("container","box");
}
}
}
// 要想获得有多少个图片，就看有多少个div，用父级查找子级空间
function imgLocation(parent,content){
//将parent下所有的content全部取出，即将container下的每一个box全部取出
var c_parent = document.getElementById(parent); //得到父级空间
//因为我们将parent传给了c_parent，所以下面调用传参的时候传入c_parent
var c_content = getChildElement(c_parent,content);
//console.log(c_content); 打印审查有多少个box
//得到图片的宽度
var imgWidth = c_content[0].offsetWidth;
//整个屏幕的宽度除以每个图片的宽度，就是这个屏幕一排能放多少张图片
var num = Math.floor(document.documentElement.clientWidth / imgWidth); //将小数转换为整数，也可以使用parseInt
// console.log(num);
//固定屏幕的宽度和放图片的个数，以至于再缩小屏幕大小后图片的摆放位置不会改变
c_parent.style.cssText = "width:"+imgWidth*num+"px;margin:0 auto"; //用js修改css内容样式,将container宽度固定并居中显示
//接下来需要判断一排中最矮的那张图片
//先用一个数组存储box的高度
var boxHeightArr = [];
for(var i = 0;i<c_content.length;i++){
if(i<num){
boxHeightArr[i] = c_content[i].offsetHeight; //将box的高度存储在数组中
}else{
//得到第一排的最小高度
var minHeight = Math.min.apply(null,boxHeightArr);
c_content[i].style.position = "absolute";
c_content[i].style.top = minHeight+"px";
var minLocation = getminHeightLocation(boxHeightArr,minHeight);
c_content[i].style.left = c_content[minLocation].offsetLeft+"px"; //将第二排的第一张图片放置在第一排最矮图片的位置的下面，如何找到这个最矮位置，就是当前最矮图片距屏幕左边的大小
boxHeightArr[minLocation] = boxHeightArr[minLocation]+c_content[i].offsetHeight; //当第二排的第一张图片加到第一排最矮的图片上以后，图片总高度变为：最矮图片高度+当前加载图片高度
}
}
}
//写一个函数来得到每排最小高度图片的位置
function getminHeightLocation(boxHeightArr,minHeight){
for(var i in boxHeightArr){
if(boxHeightArr[i] == minHeight){
return i;
}
}
}
//用一个函数来获取每一个子级空间
function getChildElement(parent,content){
//定义一个数组
var contentArr = [];
//通过父级空间得到所有的子级内容
var allcontent = parent.getElementsByTagName("*");
//用一个for循环将所有的子级内容放入数组中
for(var i=0;i<allcontent.length;i++){
//判断取出的内容是否与content相等，即是否与box相等
if(allcontent[i].className==content){
contentArr.push(allcontent[i]);
}
}
return contentArr;
}
//当滚动条拉到底部最后一张图片出现之前继续加载数据,用一个Boolean型表示，如果可以加载返回true
function checkFlag(){
var c_parent = document.getElementById("container");
var c_content = getChildElement(c_parent,"box");
//得到最后一张图片的高度
var lastContentHeight = c_content[c_content.length-1].offsetTop;
//得到scrollTop（被隐藏在内容区域上方的像素）的值
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //因为存在浏览器兼容的问题，所以用body再获取一次
//获得当前页面的高度
var pageHeight = document.documentElement.clientHeight || document.body.clientHeight;
//如果（当前页面的高度+scrollTop的高度）>最后一张距顶的高度，则加载图片
if((pageHeight+scrollTop)>lastContentHeight){
return true;
}
}
以上学习来自：极客学院