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

[JS] 瀑布流加载

2024-09-26 04:18:02   218人阅读

<!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] 瀑布流加载


联系
我们