首页 > 编程语言> 文章详细

小猿圈JavaScript瀑布流效果

2019-05-08 15:50:47 阅读：311 来源： 互联网

标签：box src JavaScript hrr 瀑布 var oBox document 小猿圈

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

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

<!DOCTYPE html>

<html>

<head>

<title>Title</title>

</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前端就要先了解是怎样工作的，这样才能针对自己不足的地方进行学习前端自学交流群：820024416，小猿圈web前端讲师提醒，学习需坚持，遇到不会的要及时找老师解决或者到小猿圈上面找答案。

标签：box,src,JavaScript,hrr,瀑布,var,oBox,document,小猿圈
来源： https://blog.csdn.net/coding567/article/details/89956508

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

小猿圈JavaScript瀑布流效果