瀑布流加载(数据模拟)

最新推荐文章于 2022-12-24 17:24:10 发布

维克多噗噗

最新推荐文章于 2022-12-24 17:24:10 发布

阅读量805

点赞数 1

分类专栏： jq

jq 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

数据data.js

window.imgData = [
                {
                    src : 'img/1.jpg',
                    dec : '你们男神都爱的倪妮 就是个大写哒美好',
                    time : '2016/03/18 20:08',
                },
                {
                    src : 'img/2.jpg',
                    dec : '没有A4腰咋滴 宝宝们有A4脸啊',
                    time : '2016/03/18 18:25',
                },
                {
                    src : 'img/3.jpg',
                    dec : '“包”治百病 呵呵那是说手好看的',
                    time : '2016/03/18 17:09',
                },
                {
                    src : 'img/4.jpg',
                    dec : '睡不好颜值down 别让7个小习惯毁掉女神梦',
                    time : '2016/03/18 11:46',
                },
                {
                    src : 'img/5.jpg',
                    dec : '沙尘天气来袭 需给皮肤做好防护',
                    time : '2016/03/18 11:44',
                },
                {
                    src : 'img/6.jpg',
                    dec : '保湿工作有漏洞 皮肤发出异常警报!',
                    time : '2016/03/18 20:08',
                },
                {
                    src : 'img/7.jpg',
                    dec : '你们男神都爱的倪妮 就是个大写哒美好',
                    time : '2016/03/18 20:08',
                },
                {
                    src : 'img/8.jpg',
                    dec : '你们男神都爱的倪妮 就是个大写哒美好',
                    time : '2016/03/18 20:08',
                },
                {
                    src : 'img/9.jpg',
                    dec : '你们男神都爱的倪妮 就是个大写哒美好',
                    time : '2016/03/18 20:08',
                },
                {
                    src : 'img/10.jpg',
                    dec : '你们男神都爱的倪妮 就是个大写哒美好',
                    time : '2016/03/18 20:08',
                },
                {
                    src : 'img/11.jpg',
                    dec : '你们男神都爱的倪妮 就是个大写哒美好',
                    time : '2016/03/18 20:08',
                },
                {
                    src : 'img/12.jpg',
                    dec : '你们男神都爱的倪妮 就是个大写哒美好',
                    time : '2016/03/18 20:08',
                },
                {
                    src : 'img/13.jpg',
                    dec : '你们男神都爱的倪妮 就是个大写哒美好',
                    time : '2016/03/18 20:08',
                },
                {
                    src : 'img/14.jpg',
                    dec : '你们男神都爱的倪妮 就是个大写哒美好',
                    time : '2016/03/18 20:08',
                },
                {
                    src : 'img/15.jpg',
                    dec : '你们男神都爱的倪妮 就是个大写哒美好',
                    time : '2016/03/18 20:08',
                },
                {
                    src : 'img/16.jpg',
                    dec : '你们男神都爱的倪妮 就是个大写哒美好',
                    time : '2016/03/18 20:08',
                },
                {
                    src : 'img/17.jpg',
                    dec : '你们男神都爱的倪妮 就是个大写哒美好',
                    time : '2016/03/18 20:08',
                },
                {
                    src : 'img/18.jpg',
                    dec : '你们男神都爱的倪妮 就是个大写哒美好',
                    time : '2016/03/18 20:08',
                },
                {
                    src : 'img/19.jpg',
                    dec : '你们男神都爱的倪妮 就是个大写哒美好',
                    time : '2016/03/18 20:08',
                },
                {
                    src : 'img/20.jpg',
                    dec : '你们男神都爱的倪妮 就是个大写哒美好',
                    time : '2016/03/18 20:08',
                },
                {
                    src : 'img/21.jpg',
                    dec : '你们男神都爱的倪妮 就是个大写哒美好',
                    time : '2016/03/18 20:08',
                },
                {
                    src : 'img/22.jpg',
                    dec : '你们男神都爱的倪妮 就是个大写哒美好',
                    time : '2016/03/18 20:08',
                },
                {
                    src : 'img/23.jpg',
                    dec : '你们男神都爱的倪妮 就是个大写哒美好',
                    time : '2016/03/18 20:08',
                },
                {
                    src : 'img/24.jpg',
                    dec : '你们男神都爱的倪妮 就是个大写哒美好',
                    time : '2016/03/18 20:08',
                },
                {
                    src : 'img/25.jpg',
                    dec : '你们男神都爱的倪妮 就是个大写哒美好',
                    time : '2016/03/18 20:08',
                },

                {
                    src : 'img/26.jpg',
                    dec : '你们男神都爱的倪妮 就是个大写哒美好',
                    time : '2016/03/18 20:08',
                },

                {
                    src : 'img/27.jpg',
                    dec : '你们男神都爱的倪妮 就是个大写哒美好',
                    time : '2016/03/18 20:08',
                },

                {
                    src : 'img/28.jpg',
                    dec : '你们男神都爱的倪妮 就是个大写哒美好',
                    time : '2016/03/18 20:08',
                },


                {
                    src : 'img/29.jpg',
                    dec : '你们男神都爱的倪妮 就是个大写哒美好',
                    time : '2016/03/18 20:08',
                },

                    {
                    src : 'img/30.jpg',
                    dec : '你们男神都爱的倪妮 就是个大写哒美好',
                    time : '2016/03/18 20:08',
                },
                        {
                    src : 'img/31.jpg',
                    dec : '你们男神都爱的倪妮 就是个大写哒美好',
                    time : '2016/03/18 20:08',
                },
                        {
                    src : 'img/32.jpg',
                    dec : '你们男神都爱的倪妮 就是个大写哒美好',
                    time : '2016/03/18 20:08',
                },
                        {
                    src : 'img/33.jpg',
                    dec : '你们男神都爱的倪妮 就是个大写哒美好',
                    time : '2016/03/18 20:08',
                },
                        {
                    src : 'img/34.jpg',
                    dec : '你们男神都爱的倪妮 就是个大写哒美好',
                    time : '2016/03/18 20:08',
                },
                        {
                    src : 'img/35.jpg',
                    dec : '你们男神都爱的倪妮 就是个大写哒美好',
                    time : '2016/03/18 20:08',
                },
                        {
                    src : 'img/36.jpg',
                    dec : '你们男神都爱的倪妮 就是个大写哒美好',
                    time : '2016/03/18 20:08',
                },
                        {
                    src : 'img/37.jpg',
                    dec : '你们男神都爱的倪妮 就是个大写哒美好',
                    time : '2016/03/18 20:08',
                },
                        {
                    src : 'img/38.jpg',
                    dec : '你们男神都爱的倪妮 就是个大写哒美好',
                    time : '2016/03/18 20:08',
                },
                        {
                    src : 'img/39.jpg',
                    dec : '你们男神都爱的倪妮 就是个大写哒美好',
                    time : '2016/03/18 20:08',
                },
                        {
                    src : 'img/40.jpg',
                    dec : '你们男神都爱的倪妮 就是个大写哒美好',
                    time : '2016/03/18 20:08',
                },
                        {
                    src : 'img/41.jpg',
                    dec : '你们男神都爱的倪妮 就是个大写哒美好',
                    time : '2016/03/18 20:08',
                },
                        {
                    src : 'img/42.jpg',
                    dec : '你们男神都爱的倪妮 就是个大写哒美好',
                    time : '2016/03/18 20:08',
                },
                        {
                    src : 'img/43.jpg',
                    dec : '你们男神都爱的倪妮 就是个大写哒美好',
                    time : '2016/03/18 20:08',
                },
                        {
                    src : 'img/44.jpg',
                    dec : '你们男神都爱的倪妮 就是个大写哒美好',
                    time : '2016/03/18 20:08',
                },
                        {
                    src : 'img/45.jpg',
                    dec : '你们男神都爱的倪妮 就是个大写哒美好',
                    time : '2016/03/18 20:08',
                },
                        {
                    src : 'img/46.jpg',
                    dec : '你们男神都爱的倪妮 就是个大写哒美好',
                    time : '2016/03/18 20:08',
                },
                        {
                    src : 'img/47.jpg',
                    dec : '你们男神都爱的倪妮 就是个大写哒美好',
                    time : '2016/03/18 20:08',
                },
                        {
                    src : 'img/48.jpg',
                    dec : '你们男神都爱的倪妮 就是个大写哒美好',
                    time : '2016/03/18 20:08',
                },
                        {
                    src : 'img/49.jpg',
                    dec : '你们男神都爱的倪妮 就是个大写哒美好',
                    time : '2016/03/18 20:08',
                },
                        {
                    src : 'img/50.jpg',
                    dec : '你们男神都爱的倪妮 就是个大写哒美好',
                    time : '2016/03/18 20:08',
                }

            ];

页面

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="Author" content="">
        <meta name="Keywords" content="">
        <meta name="Description" content="">
        <title>瀑布流加载</title>
        <style type="text/css">
            * {margin: 0; padding: 0;}
            a {text-decoration: none; color: #222;}
            ul,li {list-style: none;}
            body {font-family: "Microsoft yahei";}
            #wrap {width: 840px; box-shadow: 0 0 5px #666; margin: 50px auto;}
            /*清除浮动*/
            /*#wrap ul {overflow: hidden;}*/
            #wrap li {float: left; margin-right: 22px; width: 265px;}
            #wrap li:last-child {float: right; margin: 0;}
            .detail {border: 1px solid #ddd; margin-bottom: 20px; display: none;}
            .detail img {display: block;}
            .detail a.dec {display: block; padding: 10px 20px;}
            .detail a.dec:hover {color: #B92B34;}
            .detail .time {height: 40px; line-height: 40px; background: #f1f1f1; font-size: 12px; border: 1px solid #ddd; border-bottom: none;}
            .detail p {float: left; text-indent: 20px; color: #666;}
            .detail .time a {float: right; display: block; width: 80px; height: 40px; line-height: 40px; text-align: center; border-left: 1px solid #ddd;}
            .detail .time a:hover {color: #B92B34;}
            .clearfix:after {
                content: ".";
                height: 0;
                display: block;
                clear: both;
                overflow: hidden;
            }
        </style>
    </head>
<body>
    <div id="wrap" class="clearfix">
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="js/data.js"></script>
<script type="text/javascript">
    (function(){
        var $li = $("#wrap li");
        var length = $li.length;
        var index = 0;
        var num = 20;


         show(num);
         function show(num){
            index++;

            var i = getShort();
            var Dom = creatElement(index);
            $li.eq(i).append($(Dom));
            $(Dom).fadeIn( 1000 );
            // 等图片加载完成再执行下次
            var oImg = Dom.getElementsByTagName('img')[0];
            oImg.onload = function(){
                if ( index < num ) //48
                {
                    show( num );
                }
                if(index === 48){
                    // console.log(index);
                    show();
                }
            }
         };


         // 滚轮事件
         $(document).scroll(function(){
            var wH = $("#wrap").height()+$("#wrap").offset().top - $(document).scrollTop();
            var dH = $(window).height();  //页面高度
            if( wH < dH ){
                num = (index-1)+5;
                if(num < imgData.length-1){
                    show(num);
                    // console.log(index,num)
                }

            }
         })

        // 得到height最小的li
        function getShort(){
            var a = 0,firstH = $li.eq(0).height();
            for(var i=0;i<length;i++){
                var nH = $li.eq(i).height();
                if( nH < firstH){
                    a = i;
                    firstH = nH;
                }
            }
            return a;
        };
        /*
        创建
            <div class="detail">
                <img src="img/1.jpg" alt="" width="263">
                <a href="" class="dec">你们男神都爱的倪妮 就是个大写哒美好</a>
                <div class="time">
                    <p>2016/03/18 20:08</p>
                    <a href="">阅读全文</a>
                </div>
            </div>
         */
        function creatElement(i){
            var oDiv = document.createElement("div"),oImg = new Image(),oA = document.createElement("a"),oDiv1 = document.createElement("div"),oP = document.createElement("p"),oA1 = document.createElement("a");
            oDiv.className = "detail";
            oImg.src = imgData[i].src;
            oImg.width = "263";
            oA.href = "";
            oA.className = 'dec';
            oA.innerHTML = imgData[i].dec;
            oDiv1.className = "time";
            oP.innerHTML = imgData[i].time;
            oA1.href = "";
            oA1.innerHTML = "阅读全文";
            oDiv1.appendChild(oP);
            oDiv1.appendChild(oA1);
            oDiv.appendChild(oImg);
            oDiv.appendChild(oA);
            oDiv.appendChild(oDiv1);
            return oDiv;
        }
    })();

</script>
</body>
</html>