山猫的博客

山猫,研究网站设计与制作、后台程序开发、SEO优化和推广等。

瀑布流效果实现(infinite scrolling)

(发布于:2012-09-16 11:11)

前段时间网站流行瀑布流,也称之为无限滚动。那么如何实现的呢?有一个插件可以实现这种效果,现给出方法。

我们利用waypoint插件进行实现,该插件还有其他的几个功能都非常好,我会在后面的文章中列举出来。

首先我们写一段html文件

<!DOCTYPE html>
<html lang="en-US">
<head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>Infinite Scrolling with jQuery Waypoints</title>
</head>
<body>

<div id="wrapper">
        <section id="container">
                <div class="article">
                        <h1>Lorem Ipsum Dolor</h1>
                        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
                </div>

                <div class="article">
                        <h1>Sit Amet</h1>
                        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                </div>

                <div class="article">
                        <h1>Consectetuer Adipiscing Elit</h1>
                        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
                </div>

                <div class="article">
                        <h1>Aenean</h1>
                        <p>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</p>
                        <p>Aliquam tincidunt mauris eu risus.</p>
                </div>

                <div class="article">
                        <h1>Vestibulum</h1>
                        <p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p>
                        <p>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</p>
                </div>
                <div class="article">
                        <h1>Lorem Ipsum Dolor</h1>
                        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
                </div>

                <div class="article">
                        <h1>Sit Amet</h1>
                        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
                </div>

                <div class="article">
                        <h1>Consectetuer Adipiscing Elit</h1>
                        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
                </div>

                <div class="article">
                        <h1>Aenean</h1>
                        <p>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</p>
                        <p>Aliquam tincidunt mauris eu risus.</p>
                </div>

                <div class="article">
                        <h1>Vestibulum</h1>
                        <p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p>
                        <p>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</p>
                </div>
                <div class="article">
                        <h1>Lorem Ipsum Dolor</h1>
                        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
                </div>
        </section>

        <footer>
                <nav>
                        <ul>
                                <!-- Hijack this link for the infinite scroll -->
                                <li class="more"><a href="." title="Traditional navigation link">Next Page</a></li>
                        </ul>
                </nav>
        </footer>
</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="/cdn/waypoints.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
        $('footer').waypoint(function(event, direction) {
                $('footer').waypoint('remove');
                $('section').append($('section').html());
                $('footer').waypoint({offset: '100%'});
        }, {offset: '100%'});
});
</script>

</body>
</html>

那么实现无限滚动的就是最后这一小段的js代码。

我们来仔细看看这一小段代码的意思:

<script type="text/javascript">
$(document).ready(function() {
        $('footer').waypoint(function(event, direction) {
                $('footer').waypoint('remove');
                $('section').append($('section').html());
                $('footer').waypoint({offset: '100%'});
        }, {offset: '100%'});
});
</script>

这段代码的思路是:

1、设置第一次的 waypoint 事件,当页面可见区域到 footer 的时候触发;

2、如果 footer 有其他的 waypoint 事件,先移除他们。

3、给 section 追加内容。

4、再次设置 footer 触发点,以此循环往复……

这样一个无限滚动的效果就得以实现了。

官方文档:http://imakewebthings.com/jquery-waypoints/

评论

 提交评论