Teach you how to distinguish jquery waterfall flow js waterfall flow-JS Tutorial-php.cn

Teach you how to distinguish jquery waterfall flow js waterfall flow

坏嘻嘻

Release： 2018-09-13 16:18:24

Original

1179 people have browsed it

How to distinguish jquery waterfall flow from js waterfall flow? Today I will bring you some practical information.

The following is the html file:

<!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>

Copy after login

Related recommendations:

Jquery-based waterfall flow

thinkPHP implements waterfall flow method, thinkphp implements waterfall

The above is the detailed content of Teach you how to distinguish jquery waterfall flow js waterfall flow. For more information, please follow other related articles on the PHP Chinese website!