数据瀑布流

Posted 叶向晚77

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了数据瀑布流相关的知识,希望对你有一定的参考价值。

<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>

 

以上是关于数据瀑布流的主要内容,如果未能解决你的问题,请参考以下文章

瀑布流的原理

css瀑布流间距不对

真的!!!两行css代码实现瀑布流,html,css最简单的瀑布流实现方式且没有缺点!

网页瀑布流布局jQuery实现代码

Dreamweaver 怎么实现瀑布流

ios 瀑布流怎么自动滚动到指定cell