ajax瀑布流加载技术

来源：互联网发布：html加载完成后执行js 编辑：程序博客网时间：2024/05/29 19:38
<!DOCTYPE HTML><html>    <head>        <title>please enter your title</title>        <meta charset="utf-8">        <meta name="Author" content="年轻人">        <style type='text/css'>            *{ margin:0; padding:0;}            #wrap{                width:837px;                margin:50px auto;                box-shadow:0 0 5px #000;            }            #wrap ul{                overflow:hidden;            }            #wrap ul li{                list-style:none;                width:265px;                float:left;            }            #wrap ul li .detail{                font-family:'Microsoft yahei';                border:1px solid #ddd;                margin-bottom:20px;                display:none;            }            #wrap ul li .detail img{                display:block;            }            #wrap ul li a.dec{                line-height:25px;                padding:8px 15px;                background:#fff;                display:block;                color:#000;                text-decoration:none;            }            #wrap ul li .time{                height:42px;                background:#f1f1f1;                border-top:1px solid #ddd;            }            #wrap ul li .time p{                float:left;                line-height:42px;                color:#666;                text-indent:10px;                font-size:12px;            }            #wrap ul li .time a{                float:right;                width:80px;                line-height:42px;                text-align:center;                color:#666;                font-size:12px;                text-decoration:none;                border-left:1px solid #ddd;            }            #wrap ul li a:hover{                color:#b70032;            }        </style>    </head>    <body>        <div id="wrap">            <ul>                <li></li>                <li style="margin-left:20px;"></li>                <li style="float:right"></li>            </ul>        </div>        <!--                    <div class="detail">                        <img src="img/1.jpg" width='263' />                        <a href="" class="dec">你们男神都爱的倪妮 就是个大写哒美好</a>                        <div class="time">                            <p>2016/03/18 20:08</p>                            <a href="">阅读全文</a>                        </div>                    </div>        -->        <script type="text/javascript" src="js/jquery-1.12.1.min.js"></script>        <script type="text/javascript" src="js/data.js"></script>        <script type="text/javascript">            $(function(){                var $li = $('#wrap ul li');                var liLength = $li.length;                var $wrap = $('#wrap');                var index = -1;                show( 10 );                $(window).scroll(function(){                    var bW = $wrap.offset().top + $wrap.height() - $(document).scrollTop();                    if ( bW < $(window).height() )                    {                        num = index + 5;                        show( num );                    }                });                function show( num ){                    index ++;                    var oDiv = createDiv(index);                    var i = getShort();                    $li.eq(i).append( $(oDiv) );                    $(oDiv).fadeIn( 1000 );                    var oImg = oDiv.getElementsByTagName('img')[0];                    oImg.onload = function(){                        if ( index < num )                        {                            show( num );                        }                    }                };                //得到三个li最短的那个的序列号                function getShort(){                    //假设最短的是第一个；a -> 序列号 ; fH -> 第一个的高度                    var a = 0;                    var fH = $li.eq(0).height();                    //循环所有的li                    for ( var i=1;i<liLength;i++ )                    {                        //得到对应的li的高度                        var nH = $li.eq(i).height();                        //如果说该li的高度小于fH;                        if ( nH < fH  )                        {                            a = i; // 更新最短的序列号                            fH = nH; // 更新最短的高度                        }                    }                    return a;                }                function createDiv(i){                    var oDiv = document.createElement('div');                        oDiv.className = 'detail';                    var oImg = new Image();                        oImg.src = imgData[i].src;                        oImg.width = '263';                    var oA = document.createElement('a');                        oA.href = '';                        oA.className = 'dec';                        oA.innerHTML = imgData[i].dec;                    var oDiv1 = document.createElement('div');                        oDiv1.className = 'time';                    var oP = document.createElement('p');                        oP.innerHTML = imgData[i].time;                    var oA1 = document.createElement('a');                        oA1.href = '';                        oA1.innerHTML = '阅读全文';                    oDiv1.appendChild(oP);                    oDiv1.appendChild(oA1);                    oDiv.appendChild( oImg );                    oDiv.appendChild( oA );                    oDiv.appendChild( oDiv1 );                    return oDiv;                }            });        </script>    </body></html>
0 0