首页 > 代码库 > [JS] 瀑布流加载

[JS] 瀑布流加载

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="keywords" content="">
        <meta name="description" content="">
        <title></title>
        <script type="text/javascript" src="jQuery/jquery-3.1.1.min.js" ></script>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #box{
                width: 1000px;
                height: 500px;
                margin: 0 auto;
            }
            #box ul li{
                float: left;
                list-style: none;
                width: 225px;
                padding: 5px;
                margin: 5px;
                box-shadow: 0px 0px 5px #333;
            }
            #box ul li .pic{
                border: 1px solid #ddd;
                margin-bottom: 10px;
            }
            #box ul li img{
                width: 100%;
                height: 100%;
                display: block;
                transition: 1s;
                -webkit-transition: 1s;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <ul>
                <li>
                    
                </li>
                <li>
                    
                </li>
                <li>
                    
                </li>
                <li>
                    
                </li>
            </ul>
        </div>
    </body>
</html>
<script type="text/javascript">
    /*
     企业开发流程
     1.需求分析
     2.生成需求文档
     3.标准开发文档
         (架构师 ,项目经理)
     4.程序员最底层的工作(码农)
     分析原理:
     1.动态生成图片标签,添加到li里面
         1.获取高度最小的li,
         2.循环动态添加多个图片
         3.判断滚动条的高度,动态添加
     * */
    var $li = $(#box ul li);
    var liLength = $li.length;
    var i=0;
    var sum=0;
    var arr = [
        {src:img/pic1.jpg},
        {src:img/pic2.jpg},
        {src:img/pic3.jpg},
        {src:img/pic4.jpg},
        {src:img/pic5.jpg},
        {src:img/pic6.jpg},
        {src:img/pic7.jpg},
        {src:img/pic1.jpg},
        {src:img/pic2.jpg},
        {src:img/pic3.jpg},
        {src:img/pic4.jpg},
        {src:img/pic5.jpg},
        {src:img/pic4.jpg},
        {src:img/pic5.jpg},
        {src:img/pic4.jpg},
        {src:img/pic5.jpg}
    ];
    
    function create(){
        var oDiv = document.createElement(div);
        oDiv.className = pic;
        var oImg = new Image();
        oImg.src = arr[i%arr.length].src;
        oImg.style.cssText = opacity: 0;transform: scale(0);
        oDiv.appendChild(oImg);
        $li.eq(getList()).append(oDiv);
        //console.log(getList());
        //闭包
        (function(oImg){
            setTimeout(function(){
                oImg.style.cssText = opacity: 1;transform: scale(1);
            },100);
        })(oImg);
        
    }
    
    //获取高度最小的li
    function getList(){
        var a = 0;
        var fH = $li.eq(0).height();//获取第一个li的高度
        for(var j=0;j<liLength;j++){
            var nH = $li.eq(j).height();//得到对应的li的高度
            if(nH<fH){
                a = j;//更新最短的索引
                fH = nH;//更新最短的高度
        
            }
        }
        return a;
    }
    create();
    //循环动态添加图片,如果i<16,添加12张,如果i>16,每次动态添加3张
    function upload(){
        i++;
        if(i<16){//初始化12张图片
            for (; i < 16; i++) {
                create();
            }
        }else{
            sum = i;//在16张图片的基础上添加
            console.log(sum);
            for (;i<sum+4;i++) {
                
                create();
            }
        }
    }
    upload();
    //判断滚动条的高度,然后动态添加
    //可视区域的高度+滚动高度>文档高度
    var scrollH = ‘‘;//文档高度
    var scrollT = ‘‘;//滚动条高度
    $(function(){//当页面加载的时候
        var _height = $(window).height();//可视区域的高度
        $(window).scroll(function(){//滚动条事件
            scrollH = document.body.scrollHeight;//文档高度
            scrollT = $(window).scrollTop();//滚动条高度
            
            if(_height+scrollT+50>scrollH){
                console.log(_height+"--"+scrollT+"--"+scrollH);
                
                upload();
            }
        });
    });
</script>

 

[JS] 瀑布流加载