小猿圈JavaScript瀑布流效果

时间 2019-12-19

标签 javascript 瀑布效果栏目 JavaScript 繁體版

原文原文链接

在写一个JavaScript效果的时候必定要知道他的实现逻辑，下次在写这种东西的时候逻辑在，基本不少均可以实现了。那么下面小猿圈就针对于JavaScript瀑布流效果的代码逻辑分析一波：css

1. 先把页面布局调整好，html代码以下：html

<!DOCTYPE html>前端

<html>web

<head>数组

<title>Title</title>dom

</head>函数

*{margin:0;padding:0}学习

#main{

margin:15px auto;

position: relative;

}

.box{

padding:15px 0 0 15px;

float:left;

}

.pic{

padding:15px;

border:1px solid #ccc;

box-shadow: 0 0 5px #ccc;

border-radius: 5%;

}

.pic img{

width:168px;

}

</style>

<body>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

</body>

</html>

复制了html打开页面后，会发现，颇有地方有空白，是由于浮动致使的，下面我们就用js来实现瀑布流效果。

2. 在js中写入waterfall函数，为了实现2次调用

a)刷新页面加载一次。

b)拖动滚动条的时候加载一次。

3. 添加window.onscroll添加滚动条事件（由于下拉的时候图片也要无缝隙）

4.下面就是逻辑操做了，具体看代码吧，顺便给你一个视频教程。

JavaScript瀑布流效果视频教程

window.onload = function(){

waterfall("main","box");

var dataImg = {

arr:[

{"src":"1.jpg"},

{"src":"2.jpg"},

{"src":"3.jpg"},

{"src":"4.jpg"},

{"src":"5.jpg"},

{"src":"6.jpg"}

]

}

window.onscroll = function(){

if(scrollTop()){

for(var i=0;i<dataImg.arr.length;i++){

var main = document.getElementById("main");

var oDiv = document.createElement("div");

oDiv.className = "box";

var oPic = document.createElement("div");

oPic.className = "pic";

var imgs = document.createElement("img");

imgs.src = "images/"+dataImg.arr[i].src+"";

main.appendChild(oDiv);

oDiv.appendChild(oPic);

oPic.appendChild(imgs);

}

waterfall("main","box");

}

function scrollTop(){

var oBox = getClass("box");

var oBoxlast = oBox[oBox.length-1];

var top = document.body.scrollTop || document.documentElement.scrollTop;

var height = document.body.clientHeight || document.documentElement.clientHeight;

if(oBoxlast.offsetHeight/2+oBoxlast.offsetTop < top+height){

return true;

}else{

return false;

}

function waterfall(parent,box){

var oParent = document.getElementById(parent);

//获取到父节点

var oBox = getClass(box);

//获取到box子节点

var width = document.documentElement.clientWidth || document.body.clientWidth;

//可视区域的宽度值

var oBoxWidth = oBox[0].offsetWidth;

//获取图片的宽度

var num = Math.floor(width/oBoxWidth);

//获取可视区域，一行能放入几张图片

oParent.style.width = num*oBoxWidth+"px";

//设置父节点的宽度

var hrr= [];

for(var i=0;i<oBox.length;i++){

if(i<num){

hrr.push(oBox[i].offsetHeight);

}else{

var min=Math.min.apply(null,hrr);

var index = inArray(hrr,min);

oBox[i].style.position = "absolute";

oBox[i].style.left = index*oBoxWidth+"px";

//设置图片摆放left值 = 最小高度的下标*图片的宽度

oBox[i].style.top = min+"px";

//设置图片摆放的top值 = 最小值（上面）图片的高度;

hrr[index] += oBox[i].offsetHeight;

}

console.log(hrr);

}

function inArray(hrr,min){

for(var i=0;i<hrr.length;i++){

if(hrr[i] == min){

return i;

}

function getClass(box){ //获取class名称节点的函数

//1》把页面上全部的节点获取到

//2》循环遍历全部节点，进行条件判断，

//3》符合要求的节点放入到数组中

var doms = document.getElementsByTagName("*");

var reg = new RegExp("\\b"+box+"\\b");

var arr = [];

for(var i=0;i<doms.length;i++){

if( reg.test( doms[i].className ) ){

arr.push(doms[i]);

}

return arr;

}

对于今天的文章感受怎么样，是否对于JavaScript瀑布流效果有了新的认识呢，对往后从事前端行业是否是也有了更大的信心，想学习web前端就要先了解是怎样工做的，这样才能针对本身不足的地方进行学习，小猿圈web前端讲师提醒，学习需坚持，遇到不会的要及时找老师解决或者到小猿圈上面找答案。