小猿圈JavaScript瀑布流效果

在写一个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>

小猿圈JavaScript瀑布流效果

复制了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前端讲师提醒,学习需坚持,遇到不会的要及时找老师解决或者到小猿圈上面找答案。

上一篇:初识JavaScript(2019-06-24)


下一篇:鼠标拖曳