首頁 >web前端 >js教程 >教你如何區分jquery瀑布流js瀑布流
教你如何區分jquery瀑布流js瀑布流

坏嘻嘻原創: 2018-09-13 16:18:241248瀏覽
如何區別jquery瀑布流js瀑布流呢？今天帶給大家實戰乾貨哦。
以下是html檔：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="author" content="luoyu" />
        <title>瀑布流</title>
        <style type="text/css">
            #wraper {
                width: 1000px;
                margin: 0 auto;
            }
            
            #wraper ul li {
                margin: 0 auto;
                list-style: none;
                width: 265px;
                float: left;
                /*height: 1000px;*/
                /*background: gray;*/
                margin-left: 10px;
            }
            
            .dec {
                display: block;
                padding: 0 15px;
            }
            
            .time span{
                display: block;
                margin-bottom: 5px;
            }
            
            .time a:nth-child(2) {
                float:left ;
            }
            .time a:nth-child(3) {
                float:right ;
            }
            .time {
                padding: 10px 15px;
                /*text-align: center;*/
            }
            
            .clearfix:after {
                content: &#39;&#39;;
                display: block;
                clear: both;
            }
            
            .img_box {
                border: 1px solid #ccc;
                margin-bottom: 15px;
            }
            
            .img_box img {
                width: 263px
            }
        </style>
    </head>
    <body>
        <p id="wraper" class="clearfix">
            <ul>
                <li>
                    <!--<p class="img_box">
                        <img src="img/1.jpg" width=&#39;263&#39; />
                        <a href="" class="dec">你们男神都爱的倪妮 就是个大写哒美好</a>
                        <p class="time clearfix">
                            <a>2016/03/18 20:08</a>
                            <a href="">阅读全文</a>
                        </p>
                    </p>-->
                </li>
                <li></li>
                <li></li>
            </ul>
        </p>
    </body>
    <script src="js/jquery.js"></script>
    <script src="js/data.js"></script>
    <script type="text/javascript">
        var li_len = $(&#39;#wraper ul li&#39;).length;
        var $li = $(&#39;#wraper ul li&#39;)
        var index = -1;

        //                for(; index < 5; index++) {
        //                    var op = createp(index);
        //                    var i = getShort();
        //                    $li.eq(i).append(op);
        //        
        //                }
        //滚动过程中（不包含滚动高度），wraper高度+wraper的top要始终大于窗口高度
        $(window).scroll(function() {
            var hei = $(&#39;#wraper&#39;).height() + $(&#39;#wraper&#39;).offset().top - $(document).scrollTop();
            console.log(hei)
            //            console.log($(window).height()+"========="+$(document).scrollTop()+"----"+$(window).scrollTop())
            if(hei < $(window).height()) {
                num = index + 5
                console.log(num + "============")
                show(num);
            }
            
        })
        show(10);
        function show(num) {
            index++;
            var $p = createp(index);
            var i = getShort();
            $li.eq(i).append($p);
            $($p).fadeIn(1000);
            //  错误1            $li.eq(i).appendChild($p);
            var $img = $p.getElementsByTagName(&#39;img&#39;)[0];
            //    错误2        var $img = $p.find(&#39;img&#39;)[0];
            console.log(typeof $img)
            $img.onload = function() {
                if(index < num) {
                    show(num);
                }
            }
        }
        function getShort() {
            var a = 0;
            var $first_li_hei = $(&#39;#wraper ul li&#39;).eq(0).height();
            for(var i = 0; i < li_len; i++) {
                var li_hei = $(&#39;#wraper ul li&#39;).eq(i).height();
                if(li_hei < $first_li_hei) {
                    a = i;
                    $first_li_hei = li_hei;
                }
            }
            console.log(a + &#39;------&#39;)
            return a;
        }
        getShort();
        function createp(i) {
            var p_dom = document.createElement(&#39;p&#39;);
            //            console.log(p_dom)
            //            console.log(typeof p_dom)
            p_dom.className = &#39;img_box&#39;;
            //            var p_img_dom = document.createElement(&#39;img&#39;);
            var p_img_dom = new Image();
            p_img_dom.src = imgData[i].src;
            var p_a_dom = document.createElement(&#39;a&#39;);
            p_a_dom.className = &#39;dec&#39;;
            p_dom.appendChild(p_img_dom);
            p_dom.appendChild(p_a_dom);
            //            p_dom.className=&#39;img_box&#39;;
            var child_p = document.createElement(&#39;p&#39;);
            child_p.className = &#39;time clearfix&#39;;
            p_dom.appendChild(child_p);
            var child_p_span = document.createElement(&#39;span&#39;);
            var child_p_a = document.createElement(&#39;a&#39;);
            var child_p_a1 = document.createElement(&#39;a&#39;);
            child_p_span.innerHTML = imgData[i].dec;
            child_p_a.innerHTML = imgData[i].time;
            child_p_a1.innerHTML = &#39;阅读全文&#39;;
            child_p.appendChild(child_p_span);
            child_p.appendChild(child_p_a);
            child_p.appendChild(child_p_a1);
            //            $(&#39;#wraper ul li&#39;).eq(i).append(p_dom);
            return p_dom;
        }
    </script>
</html>
教你如何區分jquery瀑布流js瀑布流

相關文章
