瀑布流（masonry和infinitescroll）、（grid-a-licious）

闲来无事，玩玩瀑布流

一、使用masonry和infinitescroll结合(仿花瓣网)

     masonry是基于Jquery插件，用于对CSS布局的可移动层进行重新布局。Masonry愿意石工，可以这样形象的理解，页面上很多大小不一的移动层可以想象成散乱的石头，经过Masonry这个石工处理后，变成一堵美观的墙。官网地址：http://masonry.desandro.com

　　infinitescroll是基于Infinite Scroll也是基于Jquery插件，用于当滚动条滚动时追加页面内容，有网友称这种效果为”无刷新无分页完美瀑布流”展现方式。官网地址：http://infinite-scroll.com/

　　在Masonry的Example里有自动的与infinite-scroll结合的实现滚动式分页的例子，地址在这里http://masonry.desandro.com/demos/infinite-scroll.html。

首先引入js

<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="js/jquery.masonry.min.js" type="text/javascript"></script>
<script src="js/jquery.infinitescroll.min.js" type="text/javascript"></script>

然后布置item：

<div class="wrapper">
            <div id="ctx_bar">
                <div class="p">
                    最新采集
                    <ul class="pin-board-switcher clearfix">
                        <li class="first selected"><a class="pin-link" href="/all/">采集</a></li>
                        <li><a href="/boards/favorite/">画板</a></li>
                        <li class="last "><a class="user-link" href="/users/all/">推荐用户</a></li></ul>
                    <div class="right">
                    </div>
                </div>
            </div>
            <div id="waterfall">
                <div class="pin wfc wft">
                    <div class="hidden">
                        <a href="/o9skzwr1ai/">世俗男</a>采集到<a href="/boards/2165241">创意搞笑</a></div>
                    <div class="actions">
                        <div class="right">
                            <a class="like btn btn11 wbtn" onclick="return false;" href="#" data-id="60411540"><strong>
                                <em></em>赞</strong><span></span></a></div>
                        <div class="left">
                            <a class="thunderpin btn btn11 wbtn" title="快速转采" onclick="return false;" href="#"
                                data-id="60411540"><strong><em></em></strong><span></span></a><a class="repin btn btn11 wbtn"
                                    onclick="app.requireLogin(function(){ app.showDialog('repin', '60411540');});return false;"
                                    href="#"><strong>转采</strong><span></span></a></div>
                    </div>
                    <a class="img  x" href="/pins/60411540/" target="_self">
                        <img alt="世俗男采集到创意搞笑" src="pic2/1.jpg"><span style="display: none" class="stop"></span></a>
                    <p class="description">
                        快来膜拜大神吧</p>
                    <p class="stats less">
                    </p>
                    <div class="convo attribution clearfix">
                        <p>
                            <a class="img x" title="世俗男" href="/o9skzwr1ai/">
                                <img src="pic2/1.jpg"></a><a
                                    class="author x" href="/o9skzwr1ai/">世俗男</a>&nbsp;采集到&nbsp;<a class="x" href="/boards/2165241/">创意搞笑</a><a
                                        class="replyButton" title="回复"></a></p>
                    </div>
                    <div style="display: none" class="comments muted">
                    </div>
                    <div style="display: none" class="write convo clearfix">
                        <a class="img x" title="" href="//">
                            <img src="/img/default_buddy_icon.jpg"></a>
                        <form method="post" action="/pins/60411540/comments" />
                        <textarea class="GridComment" placeholder="添加评论或把采集@给好友"></textarea><a class="grid_comment_button"
                            onclick="return false;" href="#"></a></FORM></div>
                </div>
                <div class="pin wfc wft">
                    <div class="hidden">
                        <a href="/uq3l7t003x/">张婧9189</a>采集到<a href="/boards/2221246">设计创意</a></div>
                    <div class="actions">
                        <div class="right">
                            <a class="like btn btn11 wbtn" onclick="return false;" href="#" data-id="60411539"><strong>
                                <em></em>赞</strong><span></span></a></div>
                        <div class="left">
                            <a class="thunderpin btn btn11 wbtn" title="快速转采" onclick="return false;" href="#"
                                data-id="60411539"><strong><em></em></strong><span></span></a><a class="repin btn btn11 wbtn"
                                    onclick="app.requireLogin(function(){ app.showDialog('repin', '60411539');});return false;"
                                    href="#"><strong>转采</strong><span></span></a></div>
                    </div>
                    <a class="img  x" href="/pins/60411539/" target="_self">
                        <img alt="张婧9189采集到设计创意" src="pic2/2.jpg"><span style="display: none" class="stop"></span></a>
                    <p class="description">
                        文字、配图，统统都很喜欢 <a class="text-meta meta-tag" href="/tag/活动专题/">#活动专题#</a> <a class="text-meta meta-tag"
                            href="/tag/网页/">#网页#</a></p>
                    <p class="stats less">
                    </p>
                    <div class="convo attribution clearfix">
                        <p>
                            <a class="img x" title="张婧9189" href="/uq3l7t003x/">
                                <img src="pic2/2.jpg"></a><a
                                    class="author x" href="/uq3l7t003x/">张婧9189</a>&nbsp;通过&nbsp;<a class="x" href="/hanyangui/">hanyangui</a>&nbsp;采集到&nbsp;<a
                                        class="x" href="/boards/2221246/">设计创意</a><a class="replyButton" title="回复"></a></p>
                    </div>
                    <div style="display: none" class="comments muted">
                    </div>
                    <div style="display: none" class="write convo clearfix">
                        <a class="img x" title="" href="//">
                            <img src="/img/default_buddy_icon.jpg"></a>
                        <form method="post" action="/pins/60411539/comments" />
                        <textarea class="GridComment" placeholder="添加评论或把采集@给好友"></textarea><a class="grid_comment_button"
                            onclick="return false;" href="#"></a></FORM></div>
                </div>
               ...n个<div class="pin wfc wft">

最后初始化

 　　$(document).ready(function() {
            $('.wrapper:eq(1)').masonry({
                itemSelector: '.wfc',
                gutterWidth: 15,
                columnWidth: 240,
                isFitWidth: true
            });

            $('#waterfall').infinitescroll({
                navSelector: "#navigation", //导航的选择器，会被隐藏
                nextSelector: "#navigation a", //包含下一页链接的选择器
                itemSelector: ".wfc", //你将要取回的选项(内容块)
                debug: true, //启用调试信息
                animate: true, //当有新数据加载进来的时候，页面是否有动画效果，默认没有
                extraScrollPx: 150, //滚动条距离底部多少像素的时候开始加载，默认150
                bufferPx: 300, //载入信息的显示时间，时间越大，载入信息显示时间越短
                errorCallback: function() {
                    alert('error');
                }, //当出错的时候，比如404页面的时候执行的函数
                localMode: true, //是否允许载入具有相同函数的页面，默认为false
                dataType: 'html',//可以是json
//                template: function(data) {
//                    //data表示服务端返回的json格式数据，这里需要把data转换成瀑布流块的html格式，然后返回给回到函数
//                    return '';
//                },
                loading: {
                    msgText: "加载中...",
                    finishedMsg: '没有新数据了...',
                    selector: '.loading' // 显示loading信息的div
                }
            }, function(newElems) {
                //程序执行完的回调函数
                var $newElems = $(newElems);
                $('.wrapper:eq(1)').masonry('appended', $newElems);
            });
        });

二、使用grid-a-licious   http://suprb.com/apps/gridalicious/

Grid—A—Licious是一个非常棒的响应时布局jQ插件，使用这个插件，你在布局页面的时候就不需要针对不同浏览器的屏幕尺寸写宽度，它会自动根据不同设备自适应宽度。

首先新需要引入 jQuery （这里推荐新浪的jQuery库）框架和 Grid-A-Licious 插件。

<script src="jquery.js"></script>
<script src="jquery.grid-a-licious.min.js"></script>

然后布置item：

<div id="content" class="">
    <div class="item" >
        <img src="pic2/1.jpg"/>
                <div>1111</div>
    <div class="item" >
        <img src="pic2/2.jpg"/>
    </div>
    <div class="item"  >
        <img src="pic2/3.jpg"/>
    </div>
    <div class="item" >
        <img src="pic2/4.jpg"/>
    </div>
    <div class="item">
        <img src="pic2/5.jpg"/>
    </div>
        ........任意个div
    <div class="item">
        <img src="pic2/6.png"/>
    </div> 
</div>       

最后初始化：

<script>
    function onComplete(){
        alert('loadding completed!!');
    }
    $("#content").gridalicious({
        gutter: 15,
        width: 240,
        animate: true,
        animationOptions: {
        speed: 150,
        duration: 300,
        complete: onComplete
        },
    });
</script>

来源：https://www.cnblogs.com/flowers-yang/p/3379670.html