Home > Article > Web Front-end > Teach you how to distinguish jquery waterfall flow js waterfall flow

Teach you how to distinguish jquery waterfall flow js waterfall flow

坏嘻嘻Original: 2018-09-13 16:18:241203browse

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：vue-manage-system background management system development process (code)Next article：vue-manage-system background management system development process (code)

See more

Teach you how to distinguish jquery waterfall flow js waterfall flow

Related articles