masonry 瀑布流布局滑动到底部加载更多

最新推荐文章于 2024-05-19 13:47:41 发布

靳小霞

最新推荐文章于 2024-05-19 13:47:41 发布

阅读量4.4k

点赞数 1

分类专栏： JQuery BootStrap

本文链接：https://blog.csdn.net/u012493556/article/details/52681375

版权

JQuery 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

BootStrap

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
    <html>  
    <meta charset="utf-8"/>  
    <title>瀑布流动画效果</title>  
    <head>  
        <style>  
            #Books{  
                width: 500px;  
                height: auto;  
                margin: 0 auto;  
            }  
            .container-fluid {  
                padding: 20px;  
            }  
            .box {  
                margin-bottom: 20px;  
                float: left;  
                width: 220px;  
            }  
            .box img {  
                max-width: 100%  
            }  
        </style>  


    </head>  
    <body>  
    <div id="Books">  
        <div id="masonry" class="container-fluid">  
            <div class="box"><img src="1.jpg"></div>  
            <div class="box"><img src="2.jpg"></div>  
            <div class="box"><img src="4.jpg"></div>  
            <div class="box"><img src="4.jpg"></div>  
            <div class="box"><img src="5.jpg"></div>  
            <div class="box"><img src="10.jpg"></div>  
            <div class="box"><img src="7.jpg"></div>  
            <div class="box"><img src="8.jpg"></div>  
            <div class="box"><img src="9.jpg"></div>  
            <div class="box"><img src="10.jpg"></div>  
            <div class="box"><img src="11.jpg"></div>  
            <div class="box"><img src="12.jpg"></div>  
            <div class="box"><img src="4.jpg"></div>  
            <div class="box"><img src="4.jpg"></div>  
            <div class="box"><img src="5.jpg"></div>  
            <div class="box"><img src="11.jpg"></div>  
            <div class="box"><img src="12.jpg"></div>  
            <div class="box"><img src="8.jpg"></div>  
            <div class="box"><img src="9.jpg"></div>  
            <div class="box"><img src="10.jpg"></div>  
            <div class="box"><img src="1.jpg"></div>  
            <div class="box"><img src="2.jpg"></div>  
            <div class="box"><img src="4.jpg"></div>  
            <div class="box"><img src="4.jpg"></div>  
            <div class="box"><img src="5.jpg"></div>  
            <div class="box"><img src="10.jpg"></div>  
            <div class="box"><img src="7.jpg"></div>  
            <div class="box"><img src="8.jpg"></div>  
            <div class="box"><img src="9.jpg"></div>  
            <div class="box"><img src="10.jpg"></div>  

        </div>  
    </div>  
         <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
        <script src="jquery.masonry.min.js"></script>  
        <script type="text/javascript">  
            var $container = $('#masonry');  

            $container.imagesLoaded(function() {  
                $container.masonry({  
              itemSelector: '.box',  /*选定那些使用瀑布流布局*/
                    gutterWidth: 20,  
                    isAnimated: true  /*启用动画效果*/
                });  
            });  
            $(window).scroll(function(){  
                var scrollTop = $(this).scrollTop();var scrollHeight = $(document).height();var windowHeight = $(this).height();  
                if(scrollTop + windowHeight == scrollHeight){  
           $('#masonry').append('<div class="box"><img src="1.jpg"></div><div class="box"><img src="2.jpg"></div><div class="box"><img src="8.jpg"></div> <div class="box"><img src="4.jpg"></div><div class="box"><img src="5.jpg"></div><div class="box"><img src="10.jpg"></div><div class="box"><img src="7.jpg"></div><div class="box"><img src="8.jpg"></div><div class="box"><img src="9.jpg"></div><div class="box"><img src="10.jpg"></div>');  

                    $container.masonry('reload');  
                }  
            })  
        </script>  
    </body>  
    </html>

查看源码：

靳小霞

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
masonry 瀑布流布局滑动到底部加载更多

<!DOCTYPE html> <html> <meta charset="utf-8"/> <title>瀑布流动画效果</title> <head> <style> #Books{ width: 500px; height: auto
复制链接

扫一扫

专栏目录