zoukankan      html  css  js  c++  java
  • 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 + "
    状态:" + 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>
  • 相关阅读:
    【事件类】雅思口语
    【人物类】雅思口语
    【物品类】雅思口语
    Cassandra (二)Java | scala操作
    rpm安装在哪里了?
    用IDEA创建springboot项目遇到的问题Plugin 'org.springframework.boot:spring-boot-maven-plugin:' not found
    JDBC连接mysql出现The server time zone value '�й���׼ʱ��' is unrecognized
    Java反射、注解
    Junit单元测试
    Java-线程池、匿名内部类、Lambda表达式
  • 原文地址:https://www.cnblogs.com/loveufofbi/p/13737695.html
Copyright © 2011-2022 走看看