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>