关于用jquery.masonry.js实现动态加载效果(当页面滚动条拉到底部时时重新加载图片)

最新推荐文章于 2024-07-06 17:13:35 发布

风过留痕丶

最新推荐文章于 2024-07-06 17:13:35 发布

阅读量7.1k

点赞数

分类专栏： web前端文章标签： html 瀑布流 javascript

web前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<meta charset="utf-8"/>
<title>动画效果</title>
<head>
    <style>
        #Books{
            width: 1000px;
            height: auto;
            margin: 0 auto;
        }
        .container-fluid {
            padding: 20px;
        }
        .box {
            margin-bottom: 20px;
            float: left;
            width: 220px;
        }
        .box img {
            max-width: 100%
        }
    </style>
    <script src="jquery1-11.js"></script>
    <script src="jquery.masonry.min.js"></script>

</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="3.jpg"></div>
        <div class="box"><img src="4.jpg"></div>
        <div class="box"><img src="5.jpg"></div>
        <div class="box"><img src="6.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="1.jpg"></div>
        <div class="box"><img src="2.jpg"></div>
        <div class="box"><img src="3.jpg"></div>
        <div class="box"><img src="4.jpg"></div>
        <div class="box"><img src="5.jpg"></div>
        <div class="box"><img src="6.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="1.jpg"></div>
        <div class="box"><img src="2.jpg"></div>
        <div class="box"><img src="3.jpg"></div>
        <div class="box"><img src="4.jpg"></div>
        <div class="box"><img src="5.jpg"></div>
        <div class="box"><img src="6.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 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="3.jpg"></div> <div class="box"><img src="4.jpg"></div><div class="box"><img src="5.jpg"></div><div class="box"><img src="6.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>

风过留痕丶

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
关于用jquery.masonry.js实现动态加载效果(当页面滚动条拉到底部时时重新加载图片)

动画效果 #Books{ width: 1000px; height: auto; margin: 0 auto; } .container-fluid { padding: 20px; } .box {
复制链接

扫一扫

专栏目录