前端模拟5页瀑布流加载

html:

 1 <div id="masonry" class="container-fluid">
 2     <div class="box"><img src="../../img/test/wty1.png"></div>
 3     <div class="box"><img src="../../img/test/wty2.png"></div>
 4     <div class="box"><img src="../../img/test/wty3.png"></div>
 5     <div class="box"><img src="../../img/test/wty4.png"></div>
 6     <div class="box"><img src="../../img/test/wty5.png"></div>
 7     <div class="box"><img src="../../img/test/wty1.png"></div>
 8     <div class="box"><img src="../../img/test/wty2.png"></div>
 9     <div class="box"><img src="../../img/test/wty3.png"></div>
10     <div class="box"><img src="../../img/test/wty4.png"></div>
11     <div class="box"><img src="../../img/test/wty5.png"></div>
12     <div class="box"><img src="../../img/test/wty1.png"></div>
13     <div class="box"><img src="../../img/test/wty2.png"></div>
14     <div class="box"><img src="../../img/test/wty3.png"></div>
15     <div class="box"><img src="../../img/test/wty4.png"></div>
16     <div class="box"><img src="../../img/test/wty5.png"></div>
17 </div>

css:

.container-fluid {
            padding: 20px;
}
.box {
           margin-bottom: 20px;
           float: left;
           width: 220px;
}
.box img {
           max-width: 100%
}

js:

// 瀑布流布局
    /**
     * 原理
     * // 当滚动到最底部以上100像素时， 加载新内容
     * $(document).height() - $(this).scrollTop() - $(this).height()<100
     *
     */
    var $container = $(‘#masonry‘);
    $container.imagesLoaded(function() {
        $container.masonry({
            itemSelector: ‘.box‘,
            gutter: 20,
            isAnimated: true
        });

    });

    /*
     <div id="masonry" class="container-fluid">
         <div class="box"><img src="../../img/test/wty1.png"></div>
         <div class="box"><img src="../../img/test/wty2.png"></div>
         <div class="box"><img src="../../img/test/wty3.png"></div>
         <div class="box"><img src="../../img/test/wty4.png"></div>
         <div class="box"><img src="../../img/test/wty5.png"></div>
     </div>
     * */

    var content = ‘<div class="box"><img src="../../img/test/wty1.png"></div>‘ +
        ‘<div class="box"><img src="../../img/test/wty2.png"></div>‘ +
        ‘<div class="box"><img src="../../img/test/wty3.png"></div>‘ +
        ‘<div class="box"><img src="../../img/test/wty4.png"></div>‘ +
        ‘<div class="box"><img src="../../img/test/wty5.png"></div>‘;
    var $content = $(content);
    var $content2 = $(content);
    var $content3 = $(content);
    var $content4 = $(content);
    var $content5 = $(content);

    /*$(‘#add‘).on(‘click‘, function () {
        $container.append($content).masonry(‘appended‘, $content);
    });*/

    var count = 0;

    $(window).on(‘scroll‘, function () {
        var _winThis = $(this);
        var _winScrollTop = _winThis.scrollTop();
        var _docHeight = $(document).height();
        var _winHeight = _winThis.height();

        if(_winScrollTop + _winHeight == _docHeight){
            //拉到页面的最底部了
            if(count < 5) {
                //$container.append($content).masonry(‘appended‘, $content);
                count++;
                //console.log(count);

                switch (count) {
                    case 1:
                        $container.append($content).masonry(‘appended‘, $content);
                        break;
                    case 2:
                        $container.append($content2).masonry(‘appended‘, $content2);
                        break;
                    case 3:
                        $container.append($content3).masonry(‘appended‘, $content3);
                        break;
                    case 4:
                        $container.append($content4).masonry(‘appended‘, $content4);
                        break;
                    case 5:
                        $container.append($content5).masonry(‘appended‘, $content5);
                        break;
                }
            }else {
                count = 10;
            }
        }

    });