jquery瀑布流

    <script type="text/javascript" src="/static/my/mobile/js/jquery.min.js"></script>    
    <script type="text/javascript">
/* jQuery类级别插件扩展 */
$.extend({
    onReachBottom: function(params, callFn) {
        if (!params.container || !params.content) {
            console.error('缺失必要的参数');
            return;
        }

        var $container = params.container,
            $content = params.content,
            distance = params.distance || 30;

        $container.scroll(function() {
            var awayBtm = $content.height() - $container.scrollTop() - $container.height();
            if (awayBtm <= distance) {
                callFn && callFn()
            }
        });
    }
});

/* 调用插件 */
$.onReachBottom({
    "container": $(window),
    /* 容器对象 */
    "content": $(document),
    /* 内容对象 */
    "distance": 30 /* 触发事件距离,默认30px */
}, function() {
    /* 插件回调函数 */
    getUserList.get();
});

/* 项目方法 */
var getUserList = {
    /* 允许请求 */
    isGet: true,
    /* 条数 */
    rows: 20,
    /* 页码 */
    page: 1,
    /*获取*/
    get: function() {
        if (!this.isGet) {
            return;
        }
        /* 关闭请求条件,避免多次调用 */
        this.isGet = false;

        /* 缓存 this 对象 */
        var _self = this;

        $("#load").html('正在加载');

        /* 模拟请求 */
        setTimeout(function() {
            var strHtml = '';
            var pagee = '';
            pagee = $("#goods_list").children("a").length;
            $.post("{:url('index/my_goods_list_mobile_ajax')}",
            {
              cid:{$cid},
              order_c:"{$order_c}",
              pagee:pagee
            },
            function(data,status){
              // alert("数据:" + data + "\n状态:" + status);
                if(status=='success')
                {
                    // alert('--------goo--');
                    $.each(data, function (n, value) {

                   strHtml +='<a href="'+value.urlurl+'" class="aui-list-product-fl-item"><div class="aui-list-product-fl-img"><img src="http://www.xiwang0470.com/'+value.title_pic+'" alt=""></div><div class="aui-list-product-fl-text"><h3 class="aui-list-product-fl-title">'+value.goods_name+'</h3><div class="aui-list-product-fl-mes"><div><span class="aui-list-product-item-price"><em>¥</em>'+value.goods_price+'</span></div><div class="aui-btn-purchase"></div></div><div class="aui-list-self-sell"><span class="aui-self-sell">热销</span><em class="aui-self-sell-em">236条评价</em></div></div></a>';
                     //  alert(strHtml+'------');
                   });

                    $("#goods_list").append(strHtml);
                    /* 允许重新加载 */
                    $("#load").html('上拉加载更多');
                    _self.isGet = true;
                    _self.page++;                        
                }
            });
            /*
            for (var i = 1; i <= _self.rows; i++) {
                strHtml += '<div class="item">用户:' + (_self.rows * (_self.page - 1) + i) + '</div>';
            }
            */

        }, 500);
    }
};         
    </script>

 

posted @ 2020-09-27 09:17  不染不念不畏  阅读(152)  评论(0编辑  收藏  举报