ajax瀑布流加載技術

原創 babybk 2020-06-20 02:17 
<!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>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章