基于 infinitescroll、isotope、imagesLoaded 的瀑布流网站

如题，基于3个jquery插件制作的近乎完美的瀑布流网站首页
实例地址：www.bicycling.net.cn

html代码示例

<div class="cp-news-isotope">
<div class="isotope items">
    <div class="item cp-post col-md-4">
        <img src=""><a href="">标题1</a>
    </div>
    <div class="item cp-post col-md-4">
        <img src=""><a href="">标题2</a>
    </div>
    <div class="item cp-post col-md-4">
        <img src=""><a href="">标题3</a>
    </div>
</div>
</div>
<div class="clear"></div>
<nav id="page_nav" >
    <a href="index.php?route=article/article/autoload&page=2"><h3 class="text-center">加载更多</h3></a>
</nav>

<footer>
<!--这几个js套件都可以去baidu CDN找到-->
<script src="catalog/view/theme/bicycling/js/jquery-1.11.3.min.js"></script>
<!--//isotope自动排布 js 插件-->
<script src="catalog/view/theme/bicycling/js/isotope.pkgd.min.js"></script>
<!--//瀑布流 js 插件-->
<script src="catalog/view/theme/bicycling/js/jquery.infinitescroll.min.js"></script>
<!--//检查图片载入 js 插件-->
<script src="catalog/view/theme/bicycling/js/imagesloaded.pkgd.min.js"></script>
<!--自定义js代码-->
<script src="catalog/view/theme/bicycling/js/custom.min.js"></script>
</footer>

Custom.js代码示例

jQuery(document).ready(function($){
    // isotope 自动排布js代码开始
    var $container=$('.cp-news-isotope .isotope');   
    if($container.length){
        //由于需要在图片加载出来后才能进行高度计算，所以写在imagesLoaded中，不然isotope 会出现错位问题
        /*首页载入自动排布*/
        $container.imagesLoaded(function(){
            $container.isotope({itemSelector:'.item',transitionDuration:'0.6s',masonry:{columnWidth:$container.width()/ 12},layoutMode:'masonry'});
        });
        /*首页载入自动排布over*/
        /*窗口尺寸变化自动排布*/
        $(window).resize(function(){
            $container.isotope({masonry:{columnWidth:$container.width()/ 12}});
        });
        /*窗口尺寸变化自动排布over*/
        /* 首页瀑布流js 开始*/
        var currentPage = 1; // 初始化页面值
        $container.infinitescroll({
            navSelector  : '#page_nav',
            nextSelector : '#page_nav a',
            itemSelector : '.item',
            //可以设定最多加载页数 maxPage: 2,
            animate : true,
            extraScrollPx: 50, //距离底部多少距离开始加载下一页
            bufferPx : 3,
            dataType: 'json', //数据返回类型
            template: function(data) {
                //alert(data.length);
                var $newItems='';
                for(var i in data) {
                    $newItems = $newItems + "<div class='item cp-post col-md-4'>"+"<figure class='cp-thumb'><a href='" + data[i]['href'] + "'><img src='" +data[i]['thumb']+ "'></a></figure>"+"<div class='cp-post-content'><a href='" + data[i]['href'] + "'><h3>" +data[i]['name']+ "</h3></a>"+"<ul class='cp-post-meta'>"+"<li><a>" +data[i]['date_modified']+ "</a></li>"+"<li><a>" +data[i]['author']+ "</a></li></ul>"+"<p>" + data[i]['title'] + "</p>"+"<a class='read-more' href='" + data[i]['href'] + "'>Read More</a> "+ data[i]['tag'] + " <a class='leave-comment'><i class='fa fa-comment-o'></i></a></div></div>";
                }
                return $newItems;
                },
            errorCallback: function() {
              // fade out the error message after 2 seconds
              $('#infscr-loading').animate({opacity: .8},2000).fadeOut('normal');   
            },
            loading: {
                finishedMsg: '抱歉，已经没有更多的资讯了', 
                img:  '/catalog/view/theme/bicycling/images/bx_loader.gif',
                msgText : '正在努力为您加载资讯...',
                }
            },function( newElements ) {
                $container.imagesLoaded( function() {
                    $container.isotope( 'appended', $( newElements ) ); 
                });
                currentPage ++;
                //超过第三页取消自动加载，采用手动加载方式
                if( currentPage >=3 ){
                    // 取消scroll绑定
                    $(window).unbind('.infscr');
                    // 手动点击触发，要通过one() 去绑定，否则会连续触发事件
                    $('#page_nav').one("click",function(){
                        $container.infinitescroll('retrieve');
                        return false;//通过return false阻止href超链
                    });
                    // 如果没有下一页，去掉分页
                    $(document).ajaxError(function(e,xhr,opt){
                      if (xhr.status == 404) $('#page_nav').remove();
                    });
                    $('#page_nav').show();
                }
            }
          );

        /* 首页瀑布流js 结束*/
    }
});

article.php 代码示例

<?php  
class ControllerArticleArticle extends Controller {
    private $error = array(); 
    public function autoload() {        
        $this->load->model('article/article');     
        $limit = 9;//每次载入的数目       
        $page = $this->request->get['page'];        
        $data_sort = array(
            // 'filter_category_id' => $article_category_id, 
            'sort'               => 'ba.date_added',
            'order'              => 'DESC',
            'start' => ($page - 1) * $limit + 11,
            'limit' => $limit
        );      
        $results = $this->model_article_article->getArticles($data_sort);

        $data['articles'] = array();
        if(!$results){
            exit;
        }

        foreach ($results as $result) {
            $data['articles'][] = $result;
        }

        $this->response->addHeader('Content-Type: application/json');
        $this->response->setOutput(json_encode($data['articles']));

    }
}
?>