原生js瀑布流代码

作者: gtt21 | 来源:发表于2017-07-26 22:24 被阅读0次

原生js瀑布流代码
js/jQuery实现瀑布流
原生js实现瀑布流
原生js之瀑布流
Js实现瀑布流
Vue 中瀑布流以及上拉加载
原生js实现瀑布流效果
原生js写的瀑布流
原生Js实现瀑布流效果
原生js的瀑布流写法

    <!DOCTYPE html>
     <html lang="en">
     <head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/reset.css">
<style>
    #box{
        width:1000px;
        overflow: hidden;/*清除浮动影响*/
        margin:0 auto;
    }
    #box ul{
        width:300px;/*只设置宽度，自适应高度*/
        border: 1px solid #000;
        float: left;/*浮动布局*/
        margin: 10px;
    }
    #box ul li{
        width:280px;
        margin: 10px;
        background: #ff9ca1;
    }
</style>
<script>

    //定义函数，封装一个创建随机高度的li元素(替代图片)
    function createLi(){
        var oLi=document.createElement('li');//创建li元素
        oLi.style.height=parseInt(Math.random()*(500-50)+50)+'px';//li的高度随机
        return oLi;//函数返回值为li
    }

    //当页面加载完后，执行行数
    window.onload=function(){

        //获取容器
        var oBox=document.getElementById('box');

        //获取容器的每一列的ul
        var aUl=oBox.children;

        //定义函数，封装一个预加载20次的图片
        function create20(){

            //循环20次
            for(var i=0; i<20; i++){

                //每执行一次创建一个li
                var oLi=createLi();

                //把所有的ul丢进数组里面

                // 创建一个空数组
                var arr=[];

                //遍历所有的ul
                for(var k=0; k<aUl.length; k++){

                    //依次把ul添加到数组
                    arr[k]=aUl[k];
                }

                //对数组里的ul用其高度排序
                arr.sort(function(ul1,ul2){
                    return ul1.offsetHeight-ul2.offsetHeight;
                });

                //给高度最短的ul添加li（图片）
                arr[0].appendChild(oLi);
            }
        }

        //页面加载完后，直接执行一次函数，生成20张图片
        create20();

        //当滚动条变化时，执行函数
        window.onscroll=function(){

            //获取滚动条滚动的纵向距离
            var scrollT=document.documentElement.scrollTop || document.body.scrollTop;

            //获取可视区的高度
            var scrollBottom=scrollT+document.documentElement.clientHeight;

            //判断，当滚动距离大于或等于20张图片加载完body的高度时，再次加载20张图片，实现瀑布流效果

            //-500的作用是避免用户看到最后高度不一的图片和空白区域，具体数值随意
            if(scrollBottom>=document.body.offsetHeight-500){
                console.log('加载更多');//在调试框突出继续加载效果
                create20();
            }
        };
    };
</script>
   </head>
           <body>
<div id="box">
    <ul></ul>
    <ul></ul>
    <ul></ul>
</div>
    </body>
</html>