Apprenez à distinguer le flux de cascade jquery. Le flux de cascade js.-js tutoriel-php.cn

Apprenez à distinguer le flux de cascade jquery. Le flux de cascade js.

坏嘻嘻

Libérer： 2018-09-13 16:18:24

original

1256 Les gens l'ont consulté

Comment distinguer le flux de cascade jquery du flux de cascade js ? Aujourd'hui, je vais vous apporter quelques informations pratiques.

Ce qui suit est le fichier 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>

Copier après la connexion

Recommandations associées :

Flux de cascade basé sur Jquery

thinkPHP implémente la méthode de flux en cascade, thinkphp implémente la méthode de cascade

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!