数据瀑布流

<script type="text/javascript" src="{$static_domain}/js/template.js"></script><style>
    .a_load_more {
        height: 20px;
        line-height: 20px;
        text-align: center;
    }

    .visib {
        visibility: hidden;
    }

    .review_list .list .list_con {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        max-height: 32px;
    }
</style>
<script id="test" type="text/html">
    <li class="item">
     <span class="img">
        <a href="/pro-shots/{{image_id+'.html'}}" rel="nofollow" alt="{{image_title}}">
            <img src="{{image_url}}"/>
        </a>
     </span>
        <span class="user">
         <a href="javascript:void(0);">
          <img src="{{if avatars_url && op_type==1}}{{avatars_url}}{{else}}/templates/default/images/touxiang.png{{/if}}"/>
         </a>
         <b class="ellipsis">{{if op_type==2}}{{more_customers_name}}{{else}}{{customers_name}}{{/if}}</b>
         <strong>{{add_date}}</strong>
     </span>
        <div class="btn" id="{{image_id}}" type="image">
            <b><i></i>{{$LP_REVIEW_IMAGE_LIST}} (<s>{{diggs}}</s>)</b>
            <b><i></i>{{$LP_FEEDBACK}} (<s>{{comments_count}}</s>)</b>
        </div>

        <div class="review_list">
            {{each comments as value i}}
            <div class="list">
                <i><img src="{{comments[i].avatars_url}}"/></i>
                <span class="list_con">
                    <b>{{comments[i].customers_nikename}}</b> {{comments[i].post_content}}
                </span>
                <span class="time">{{comments[i].post_add_datetime}}</span>
            </div>
            {{/each}}
            {{if comments_count > 3}}
            <span class="more"><a href="/pro-shots/{{image_id+'.html'}}">More &gt;&gt;</a></span>
            {{/if}}
        </div>
    </li>
</script>
<script>
    ;(function (window, $) {
        /*contentBox存放的容器
         *loadBtn 加载更多的按钮
         *ajaxUrl 服务器地址
         * pageIndex 页码
         * pedding 是否正在发ajax请求
         * */
        var scrollPages = function (opt) {
            this.option = {
                contentBox: '',
                loadBtn: '',
                ajaxUrl: '',
                pageIndex: 1,
                pageMaX: '',
                pedding: 0
            }
            this.option = $.extend(this.option, opt);
        }
        scrollPages.prototype.init = function () {
            var me = this;
            // 先获取窗口的高度
            var wp = $(window).height();
            // 为滚动条绑定一个滚动事件
            $(window).bind('scroll', function () {
                // 如果当前正在发请求中就不再响应事件
                if (me.option.pending == 1)
                    return;
                // 获取加载更多按钮所在的位置
                var p = me.option.loadBtn.offset();
                if (p == 0)
                    return;
                // 获取滚动了多高
                var sh = $(window).scrollTop();
                // 如果窗口的高度加上滚动的高度大于按钮距离上面的距离就说明按钮出现在了屏幕上
                if ((sh + wp - 40) > p.top) {
                    me.option.pending = 1;  // 标记为当前正在发AJAX请求
                    me.option.loadBtn.trigger("click");
                }
            })
            me.option.loadBtn.bind('click', function () {
                me.ajaxPage();
            })
            me.option.loadBtn.trigger("click");
        }
        scrollPages.prototype.ajaxPage = function () {
            var me = this;
            $.ajax({
                url: me.option.ajaxUrl + '&page=' + me.option.pageIndex,
                type: "GET",
                dataType: "json",
                beforeSend: function () {
                    me.option.loadBtn.removeClass('visib');
                },
                success: function (result) {
                    // 把数据放到页面上;
                    if (result.data.data.length > 0) {
                        var newData = [];
                        (function () {
                            newData.push(result.data.data.splice(0, 5));
                            if (result.data.data.length) {
                                arguments.callee();
                            }
                        })();
                        for (var i = 0; i < newData.length; i++) {
                            for (var k = 0; k < newData[i].length; k++) {
                                var $item = newData[i][k];
                                var html = template('test', $item);
                                me.option.contentBox.find('ul').eq(k).append(html);
                            }
                        }
                        me.option.pageMaX = result.data.total_page;
                        me.option.pageIndex++;  // 下一次取下一页
                        if (me.option.pageMaX < me.option.pageIndex) {
                            // 如果没有数据
                            $(window).unbind("scroll");
                            me.option.loadBtn.removeClass('visib').unbind('click').html('');
                            return false;
                        }
                        me.option.loadBtn.addClass('visib');
                        me.option.pending = 0; // 可以发下一个AJAX请求了
                    } else {
                        $(window).unbind("scroll");
                        me.option.loadBtn.removeClass('visib').unbind('click').html('Stay Tuned !');
                        return false;
                    }

                },
                complete: function () {
                    me.option.loadBtn.addClass('visib');
                }
            });
        }
        window.scrollPage = function (opt) {
            return new scrollPages(opt);
        }
    })(window, jQuery);
    var addpage = scrollPage({
        contentBox: $('.images_water'),
        loadBtn: $('.a_load_more'),
        ajaxUrl: '/index.php?com=shots&cat_id=' + $('#shots_cat').val(),
    })
    addpage.init();
</script>