[H5]Javascript瀑布流
用HTML、CSS和Javascript实现瀑布流效果。
[index.html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流</title>
<link rel="stylesheet" href="indexCSS.css">
<script src="indexJS.js"></script>
</head>
<body>
<!--父视图-->
<div id="superDivID">
<!--图片根视图-->
<div class="baseDivClass">
<div class="imgDivClass">
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1987826422,3902444409&fm=27&gp=0.jpg">
</div>
</div>
<div class="baseDivClass">
<div class="imgDivClass">
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=52961750,4241917740&fm=27&gp=0.jpg">
</div>
</div>
<div class="baseDivClass">
<div class="imgDivClass">
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2641791226,3925668594&fm=27&gp=0.jpg">
</div>
</div>
<div class="baseDivClass">
<div class="imgDivClass">
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1683328425,3416302444&fm=27&gp=0.jpg">
</div>
</div>
<div class="baseDivClass">
<div class="imgDivClass">
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3003671193,2553903077&fm=27&gp=0.jpg">
</div>
</div>
<div class="baseDivClass">
<div class="imgDivClass">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2317290404,595811789&fm=27&gp=0.jpg">
</div>
</div>
<div class="baseDivClass">
<div class="imgDivClass">
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2626132253,3693590351&fm=27&gp=0.jpg">
</div>
</div>
<div class="baseDivClass">
<div class="imgDivClass">
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=895886714,3307578363&fm=27&gp=0.jpg">
</div>
</div>
</div>
</body>
</html>
[indexCSS.css]
*{
margin: 0px;
padding: 0px;
}
#superDivID{
position: relative;
}
.baseDivClass{
padding: 5px;
float: left;
}
.imgDivClass{
/*内边距*/
padding: 5px;
/*边框*/
border: 1px solid #66CCFF;
/*圆角*/
border-radius: 5px;
/*阴影*/
box-shadow: 0px 1px 5px #66CCFF;
}
.imgDivClass img{
width: 200px;
height: auto;
}
[indexJS.js]
// 获取第一列的高度,自后每张图都加载到该去的位置
var sectionHeights = [];
// 窗口加载时触发
window.onload = function () {
var superDiv = parameterSuperDiv();
var baseDivs = parmeterBaseDivs();
setLoadPictureOnRowAction(superDiv, baseDivs);
}
// 父视图div
function parameterSuperDiv () {
return document.getElementById("superDivID");
}
// 图片根视图divs
function parmeterBaseDivs () {
return getAllBaseDivAction(parameterSuperDiv(), "baseDivClass");
}
// 获取所有的baseDiv
function getAllBaseDivAction (superDiv, divClass) {
var resultDivs = [];
// tag name传"*"表示获取所有的子节点
var subViews = superDiv.getElementsByTagName("*");
for (var i = 0 ; i < subViews.length ; i ++) {
var tempView = subViews[i];
if (tempView.className == divClass) {
resultDivs.push(tempView);
}
}
return resultDivs;
}
// 根据窗口大小确定每行加载图片的张数
function setLoadPictureOnRowAction (superDiv, baseDivs) {
var screenWidth = document.body.offsetWidth;
var baseDivWidth = baseDivs[0].offsetWidth;
var number = Math.floor(screenWidth/baseDivWidth);
// 更改样式,固定每行显示几张图片
superDiv.style.cssText = "width:"+baseDivWidth*number+"px;margin:0 auto"; // 居中
for (var i = 0 ; i < baseDivs.length ; i ++) {
var tempDiv = baseDivs[i];
if (i < number) {
sectionHeights.push(tempDiv.offsetHeight);
} else {
// 获取到列高数组中最短的高度
var minHeight = Math.min.apply(null, sectionHeights);
// 获取最短高度的索引
var minIndex = getMinHeightIndexAction(sectionHeights, minHeight);
// 放置div
tempDiv.style.position = "absolute"; // 绝对布局
tempDiv.style.top = minHeight + "px";
tempDiv.style.left = baseDivs[minIndex].offsetLeft+"px";
// 更新列高数组
sectionHeights[minIndex] = sectionHeights[minIndex] + tempDiv.offsetHeight;
}
}
}
// 获取最短高度的索引
function getMinHeightIndexAction (heightArr, height) {
for (var i in heightArr) {
if (heightArr[i] == height) {
return i;
}
}
}
// 拖动滚动条时触发
window.onscroll = function () {
if (judgeHandleAction()) {
var superDiv = parameterSuperDiv();
var baseDivs = parmeterBaseDivs();
var dataArr = getDataActon().data;
for (var i = 0 ; i < dataArr.length ; i ++) {
var tempBaseDiv = document.createElement("div");
tempBaseDiv.className = "baseDivClass";
superDiv.appendChild(tempBaseDiv);
var tempImgDiv = document.createElement("div");
tempImgDiv.className = "imgDivClass";
tempBaseDiv.appendChild(tempImgDiv);
var tempImg = document.createElement("img");
tempImg.src = dataArr[i].href;
tempImgDiv.appendChild(tempImg);
//////
// 获取到列高数组中最短的高度
var minHeight = Math.min.apply(null, sectionHeights);
// 获取最短高度的索引
var minIndex = getMinHeightIndexAction(sectionHeights, minHeight);
// 放置div
tempBaseDiv.style.position = "absolute"; // 绝对布局
tempBaseDiv.style.top = minHeight + "px";
tempBaseDiv.style.left = baseDivs[minIndex].offsetLeft+"px";
// 更新列高数组
sectionHeights[minIndex] = sectionHeights[minIndex] + tempBaseDiv.offsetHeight;
}
}
}
// 判断是否执行操作,滚动至最后一张图片
function judgeHandleAction () {
var superDiv = parameterSuperDiv();
var baseDivs = parmeterBaseDivs();
var lastTopHeight = baseDivs[baseDivs.length-1].offsetTop;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollHeight = document.documentElement.clientHeight || document.body.clientHeight;
if (lastTopHeight <= scrollTop + scrollHeight) {
return true;
}
}
// 获取数据
function getDataActon () {
var tempData = {data:[
{href:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=667706406,1676631862&fm=27&gp=0.jpg"},
{href:"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=51507768,2947470087&fm=27&gp=0.jpg"},
{href:"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1071296691,2665895355&fm=27&gp=0.jpg"},
{href:"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3093140537,3384201392&fm=27&gp=0.jpg"},
{href:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3054219273,1131937745&fm=27&gp=0.jpg"},
{href:"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1581547123,4018285152&fm=27&gp=0.jpg"},
{href:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2794185879,949273817&fm=27&gp=0.jpg"},
{href:"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3423585557,1183372858&fm=27&gp=0.jpg"},
{href:"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2710939957,1867847746&fm=27&gp=0.jpg"},
{href:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4006270021,2695890097&fm=27&gp=0.jpg"},
{href:"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3289367186,506696049&fm=27&gp=0.jpg"},
{href:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1994328069,2361504869&fm=27&gp=0.jpg"},
{href:"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3303201075,3149655512&fm=27&gp=0.jpg"},
{href:"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1728955560,3431188870&fm=27&gp=0.jpg"}
]};
return tempData;
}
示意图: