在写一个JavaScript效果的时候一定要知道他的实现逻辑，下次在写这种东西的时候逻辑在，基本很多都可以实现了。那么下面小猿圈就针对于JavaScript瀑布流效果的代码逻辑分析一波：
1. 先把页面布局调整好，html代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style type="text/css">
*{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 id="main">
<div>
<div><img src="images/1.jpg" alt=""></div>
</div>
<div>
<div><img src="images/2.jpg" alt=""></div>
</div>
<div>
<div><img src="images/3.jpg" alt=""></div>
</div>
<div>
<div><img src="images/4.jpg" alt=""></div>
</div>
<div>
<div><img src="images/5.jpg" alt=""></div>
</div>
<div>
<div><img src="images/6.jpg" alt=""></div>
</div>
<div>
<div><img src="images/7.jpg" alt=""></div>
</div>
<div>
<div><img src="images/8.jpg" alt=""></div>
</div>
<div>
<div><img src="images/9.jpg" alt=""></div>
</div>
<div>
<div><img src="images/10.jpg" alt=""></div>
</div>
<div>
<div><img src="images/11.jpg" alt=""></div>
</div>
<div>
<div><img src="images/12.jpg" alt=""></div>
</div>
<div>
<div><img src="images/13.jpg" alt=""></div>
</div>
<div>
<div><img src="images/14.jpg" alt=""></div>
</div>
<div>
<div><img src="images/15.jpg" alt=""></div>
</div>
<div>
<div><img src="images/16.jpg" alt=""></div>
</div>
<div>
<div><img src="images/17.jpg" alt=""></div>
</div>
<div>
<div><img src="images/18.jpg" alt=""></div>
</div>
<div>
<div><img src="images/19.jpg" alt=""></div>
</div>
<div>
<div><img src="images/20.jpg" alt=""></div>
</div>
<div>
<div><img src="images/1.jpg" alt=""></div>
</div>
<div>
<div><img src="images/2.jpg" alt=""></div>
</div>
<div>
<div><img src="images/3.jpg" alt=""></div>
</div>
<div>
<div><img src="images/4.jpg" alt=""></div>
</div>
<div>
<div><img src="images/5.jpg" alt=""></div>
</div>
<div>
<div><img src="images/6.jpg" alt=""></div>
</div>
<div>
<div><img src="images/7.jpg" alt=""></div>
</div>
<div>
<div><img src="images/8.jpg" alt=""></div>
</div>
<div>
<div><img src="images/9.jpg" alt=""></div>
</div>
<div>
<div><img src="images/10.jpg" alt=""></div>
</div>
<div>
<div><img src="images/11.jpg" alt=""></div>
</div>
<div>
<div><img src="images/12.jpg" alt=""></div>
</div>
<div>
<div><img src="images/13.jpg" alt=""></div>
</div>
<div>
<div><img src="images/14.jpg" alt=""></div>
</div>
<div>
<div><img src="images/15.jpg" alt=""></div>
</div>
<div>
<div><img src="images/16.jpg" alt=""></div>
</div>
<div>
<div><img src="images/17.jpg" alt=""></div>
</div>
<div>
<div><img src="images/18.jpg" alt=""></div>
</div>
<div>
<div><img src="images/19.jpg" alt=""></div>
</div>
<div>
<div><img src="images/20.jpg" alt=""></div>
</div>
</div>
<script src="js/waterfall.js"></script>
</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前端就要先了解是怎样工作的，这样才能针对自己不足的地方进行学习前端自学交流群：820024416，小猿圈web前端讲师提醒，学习需坚持，遇到不会的要及时找老师解决或者到小猿圈上面找答案。
网友评论