html:
1 <section class="goodsListContainer"> 2 <ul class="m_goodsList clearfix"> 3 <li> 4 <a href="{:U('Mjf/Index/goodsDetail')}"> 5 <img src="__PUBLIC__/wap/images/goods4.png"> 6 <p>KOBE LETTUCE 秋冬新款 女士日系甜美纯色半高领宽高 女士日系甜美纯色半高领宽高</p> 7 <span class="m_zy">自营</span><span class="m_tg">团购</span> 8 <div class="m_price_wrap clearfix"> 9 <div class="m_price">￥<span>399.00</span></div> 10 <div class="m_sales_num">已售<span>368</span></div> 11 </div> 12 </a> 13 </li> 14 <li> 15 <a href="javascript:void(0);"> 16 <img src="__PUBLIC__/wap/images/goods4.png"> 17 <p>KOBE LETTUCE 秋冬新款 女士日系甜美纯色半高领宽高 女士日系甜美纯色半高领宽高</p> 18 <span class="m_zy">自营</span><span class="m_tg">团购</span> 19 <div class="m_price_wrap clearfix"> 20 <div class="m_price">￥<span>399.00</span></div> 21 <div class="m_sales_num">已售<span>368</span></div> 22 </div> 23 </a> 24 </li> 25 <li> 26 <a href="javascript:void(0);"> 27 <img src="__PUBLIC__/wap/images/goods4.png"> 28 <p>KOBE LETTUCE 秋冬新款 女士日系甜美纯色半高领宽高 女士日系甜美纯色半高领宽高</p> 29 <span class="m_zy">自营</span><span class="m_tg">团购</span> 30 <div class="m_price_wrap clearfix"> 31 <div class="m_price">￥<span>399.00</span></div> 32 <div class="m_sales_num">已售<span>368</span></div> 33 </div> 34 </a> 35 </li> 36 <li> 37 <a href="javascript:void(0);"> 38 <img src="__PUBLIC__/wap/images/goods4.png"> 39 <p>KOBE LETTUCE 秋冬新款 女士日系甜美纯色半高领宽高 女士日系甜美纯色半高领宽高</p> 40 <span class="m_zy">自营</span><span class="m_tg">团购</span> 41 <div class="m_price_wrap clearfix"> 42 <div class="m_price">￥<span>399.00</span></div> 43 <div class="m_sales_num">已售<span>368</span></div> 44 </div> 45 </a> 46 </li> 47 <li> 48 <a href="javascript:void(0);"> 49 <img src="__PUBLIC__/wap/images/goods4.png"> 50 <p>KOBE LETTUCE 秋冬新款 女士日系甜美纯色半高领宽高 女士日系甜美纯色半高领宽高</p> 51 <span class="m_zy">自营</span><span class="m_tg">团购</span> 52 <div class="m_price_wrap clearfix"> 53 <div class="m_price">￥<span>399.00</span></div> 54 <div class="m_sales_num">已售<span>368</span></div> 55 </div> 56 </a> 57 </li> 58 <li> 59 <a href="javascript:void(0);"> 60 <img src="__PUBLIC__/wap/images/goods4.png"> 61 <p>KOBE LETTUCE 秋冬新款 女士日系甜美纯色半高领宽高 女士日系甜美纯色半高领宽高</p> 62 <span class="m_zy">自营</span><span class="m_tg">团购</span> 63 <div class="m_price_wrap clearfix"> 64 <div class="m_price">￥<span>399.00</span></div> 65 <div class="m_sales_num">已售<span>368</span></div> 66 </div> 67 </a> 68 </li> 69 <li> 70 <a href="javascript:void(0);"> 71 <img src="__PUBLIC__/wap/images/goods4.png"> 72 <p>KOBE LETTUCE 秋冬新款 女士日系甜美纯色半高领宽高 女士日系甜美纯色半高领宽高</p> 73 <span class="m_zy">自营</span><span class="m_tg">团购</span> 74 <div class="m_price_wrap clearfix"> 75 <div class="m_price">￥<span>399.00</span></div> 76 <div class="m_sales_num">已售<span>368</span></div> 77 </div> 78 </a> 79 </li> 80 <li> 81 <a href="javascript:void(0);"> 82 <img src="__PUBLIC__/wap/images/goods4.png"> 83 <p>KOBE LETTUCE 秋冬新款 女士日系甜美纯色半高领宽高 女士日系甜美纯色半高领宽高</p> 84 <span class="m_zy">自营</span><span class="m_tg">团购</span> 85 <div class="m_price_wrap clearfix"> 86 <div class="m_price">￥<span>399.00</span></div> 87 <div class="m_sales_num">已售<span>368</span></div> 88 </div> 89 </a> 90 </li> 91 <li> 92 <a href="javascript:void(0);"> 93 <img src="__PUBLIC__/wap/images/goods4.png"> 94 <p>KOBE LETTUCE 秋冬新款 女士日系甜美纯色半高领宽高 女士日系甜美纯色半高领宽高</p> 95 <span class="m_zy">自营</span><span class="m_tg">团购</span> 96 <div class="m_price_wrap clearfix"> 97 <div class="m_price">￥<span>399.00</span></div> 98 <div class="m_sales_num">已售<span>368</span></div> 99 </div> 100 </a> 101 </li> 102 <li> 103 <a href="javascript:void(0);"> 104 <img src="__PUBLIC__/wap/images/goods4.png"> 105 <p>KOBE LETTUCE 秋冬新款 女士日系甜美纯色半高领宽高 女士日系甜美纯色半高领宽高</p> 106 <span class="m_zy">自营</span><span class="m_tg">团购</span> 107 <div class="m_price_wrap clearfix"> 108 <div class="m_price">￥<span>399.00</span></div> 109 <div class="m_sales_num">已售<span>368</span></div> 110 </div> 111 </a> 112 </li> 113 <li> 114 <a href="javascript:void(0);"> 115 <img src="__PUBLIC__/wap/images/goods4.png"> 116 <p>KOBE LETTUCE 秋冬新款 女士日系甜美纯色半高领宽高 女士日系甜美纯色半高领宽高</p> 117 <span class="m_zy">自营</span><span class="m_tg">团购</span> 118 <div class="m_price_wrap clearfix"> 119 <div class="m_price">￥<span>399.00</span></div> 120 <div class="m_sales_num">已售<span>368</span></div> 121 </div> 122 </a> 123 </li> 124 <li> 125 <a href="javascript:void(0);"> 126 <img src="__PUBLIC__/wap/images/goods4.png"> 127 <p>KOBE LETTUCE 秋冬新款 女士日系甜美纯色半高领宽高 女士日系甜美纯色半高领宽高</p> 128 <span class="m_zy">自营</span><span class="m_tg">团购</span> 129 <div class="m_price_wrap clearfix"> 130 <div class="m_price">￥<span>399.00</span></div> 131 <div class="m_sales_num">已售<span>368</span></div> 132 </div> 133 </a> 134 </li> 135 <li> 136 <a href="javascript:void(0);"> 137 <img src="__PUBLIC__/wap/images/goods4.png"> 138 <p>KOBE LETTUCE 秋冬新款 女士日系甜美纯色半高领宽高 女士日系甜美纯色半高领宽高</p> 139 <span class="m_zy">自营</span><span class="m_tg">团购</span> 140 <div class="m_price_wrap clearfix"> 141 <div class="m_price">￥<span>399.00</span></div> 142 <div class="m_sales_num">已售<span>368</span></div> 143 </div> 144 </a> 145 </li> 146 <li> 147 <a href="javascript:void(0);"> 148 <img src="__PUBLIC__/wap/images/goods4.png"> 149 <p>KOBE LETTUCE 秋冬新款 女士日系甜美纯色半高领宽高 女士日系甜美纯色半高领宽高</p> 150 <span class="m_zy">自营</span><span class="m_tg">团购</span> 151 <div class="m_price_wrap clearfix"> 152 <div class="m_price">￥<span>399.00</span></div> 153 <div class="m_sales_num">已售<span>368</span></div> 154 </div> 155 </a> 156 </li> 157 <li> 158 <a href="javascript:void(0);"> 159 <img src="__PUBLIC__/wap/images/goods4.png"> 160 <p>KOBE LETTUCE 秋冬新款 女士日系甜美纯色半高领宽高 女士日系甜美纯色半高领宽高</p> 161 <span class="m_zy">自营</span><span class="m_tg">团购</span> 162 <div class="m_price_wrap clearfix"> 163 <div class="m_price">￥<span>399.00</span></div> 164 <div class="m_sales_num">已售<span>368</span></div> 165 </div> 166 </a> 167 </li> 168 <li> 169 <a href="javascript:void(0);"> 170 <img src="__PUBLIC__/wap/images/goods4.png"> 171 <p>KOBE LETTUCE 秋冬新款 女士日系甜美纯色半高领宽高 女士日系甜美纯色半高领宽高</p> 172 <span class="m_zy">自营</span><span class="m_tg">团购</span> 173 <div class="m_price_wrap clearfix"> 174 <div class="m_price">￥<span>399.00</span></div> 175 <div class="m_sales_num">已售<span>368</span></div> 176 </div> 177 </a> 178 </li> 179 <li> 180 <a href="javascript:void(0);"> 181 <img src="__PUBLIC__/wap/images/goods4.png"> 182 <p>KOBE LETTUCE 秋冬新款 女士日系甜美纯色半高领宽高 女士日系甜美纯色半高领宽高</p> 183 <span class="m_zy">自营</span><span class="m_tg">团购</span> 184 <div class="m_price_wrap clearfix"> 185 <div class="m_price">￥<span>399.00</span></div> 186 <div class="m_sales_num">已售<span>368</span></div> 187 </div> 188 </a> 189 </li> 190 <li> 191 <a href="javascript:void(0);"> 192 <img src="__PUBLIC__/wap/images/goods4.png"> 193 <p>KOBE LETTUCE 秋冬新款 女士日系甜美纯色半高领宽高 女士日系甜美纯色半高领宽高</p> 194 <span class="m_zy">自营</span><span class="m_tg">团购</span> 195 <div class="m_price_wrap clearfix"> 196 <div class="m_price">￥<span>399.00</span></div> 197 <div class="m_sales_num">已售<span>368</span></div> 198 </div> 199 </a> 200 </li> 201 <li> 202 <a href="javascript:void(0);"> 203 <img src="__PUBLIC__/wap/images/goods4.png"> 204 <p>KOBE LETTUCE 秋冬新款 女士日系甜美纯色半高领宽高 女士日系甜美纯色半高领宽高</p> 205 <span class="m_zy">自营</span><span class="m_tg">团购</span> 206 <div class="m_price_wrap clearfix"> 207 <div class="m_price">￥<span>399.00</span></div> 208 <div class="m_sales_num">已售<span>368</span></div> 209 </div> 210 </a> 211 </li> 212 <li> 213 <a href="javascript:void(0);"> 214 <img src="__PUBLIC__/wap/images/goods4.png"> 215 <p>KOBE LETTUCE 秋冬新款 女士日系甜美纯色半高领宽高 女士日系甜美纯色半高领宽高</p> 216 <span class="m_zy">自营</span><span class="m_tg">团购</span> 217 <div class="m_price_wrap clearfix"> 218 <div class="m_price">￥<span>399.00</span></div> 219 <div class="m_sales_num">已售<span>368</span></div> 220 </div> 221 </a> 222 </li> 223 <li> 224 <a href="javascript:void(0);"> 225 <img src="__PUBLIC__/wap/images/goods4.png"> 226 <p>KOBE LETTUCE 秋冬新款 女士日系甜美纯色半高领宽高 女士日系甜美纯色半高领宽高</p> 227 <span class="m_zy">自营</span><span class="m_tg">团购</span> 228 <div class="m_price_wrap clearfix"> 229 <div class="m_price">￥<span>399.00</span></div> 230 <div class="m_sales_num">已售<span>368</span></div> 231 </div> 232 </a> 233 </li> 234 <li> 235 <a href="javascript:void(0);"> 236 <img src="__PUBLIC__/wap/images/goods4.png"> 237 <p>KOBE LETTUCE 秋冬新款 女士日系甜美纯色半高领宽高 女士日系甜美纯色半高领宽高</p> 238 <span class="m_zy">自营</span><span class="m_tg">团购</span> 239 <div class="m_price_wrap clearfix"> 240 <div class="m_price">￥<span>399.00</span></div> 241 <div class="m_sales_num">已售<span>368</span></div> 242 </div> 243 </a> 244 </li> 245 </ul> 246 </section> 247 <div id="loadMore" class="tips_div">点击继续加载</div> 248 <div id="loadNothing" class="tips_div">没有更多商品了</div> 249 <div id="loadMark"><img src="__PUBLIC__/wap/images/loading.gif"></div>
js:
1 $(document).ready(function(){ 2 var scrollFlag = true; 3 var goodsNum = 20; 4 $("#loadMore").click(function(){ 5 scrollFlag = false; 6 $(this).hide(); 7 $("#loadMark").show(); 8 loadHtml(); 9 }); 10 function loadHtml(){ 11 var goodsListUl = $(".m_goodsList"); 12 $.post(0,{},function(data){ 13 var html = ""; 14 for (var i = 0; i < 10; i++) { 15 html += '<li><a href="' + "javascript:void(0);" + '">'; 16 html += '<img src="../../Public/wap/images/m-home-pic-new.png" data-src="' + "../../Public/wap/images/goods4.png" + '">'; 17 html += '<p>' + 'KOBE LETTUCE 秋冬新款 女士日系甜美纯色半高领宽高 女士日系甜美纯色半高领宽高' + '</p>'; 18 html += '<span class="m_zy">自营</span>'; 19 html += '<span class="m_tg">团购</span>'; 20 html += '<div class="m_price_wrap clearfix">'; 21 html += '<div class="m_price">￥<span>' + '399.00' + '</span></div>'; 22 html += '<div class="m_sales_num">已售<span>' + '368' + '</span></div>'; 23 html += '</div></a></li>'; 24 goodsNum ++; 25 } 26 goodsListUl.append(html); 27 loadImg(); 28 scrollFlag = true; 29 }); 30 } 31 function loadImg(){ 32 $(".m_goodsList").find("img").each(function(){ 33 var src = $(this).attr("data-src"); 34 if (src) { 35 var img = new Image(); 36 img.src = src; 37 var scope = this; 38 img.onload = function(){ 39 $(scope).attr({"src":this.src,"data-src":""}); 40 }; 41 } 42 }); 43 } 44 var preScrollTop = 0; 45 var switchDirection = 1; 46 var scrollDirection = 2; 47 $(document).scroll(function(e){ 48 //判断是否继续加载页面还是显示 “加载更多商品” 49 var scrollTop = $(document).scrollTop(); 50 var winHeight = $(window).height(); 51 var dis = $("#loadMark").offset().top - winHeight; 52 if (dis - scrollTop < 100 && scrollFlag) { 53 if (goodsNum < 500) { 54 if (goodsNum%50 !== 0) { 55 scrollFlag = false; 56 loadHtml(); 57 }else{ 58 $("#loadMore").show(); 59 $("#loadMark").hide(); 60 } 61 }else{ 62 $("#loadMore").hide(); 63 $("#loadMark").show(); 64 $("#loadNothing").show(); 65 } 66 } 67 //判断头部固定索引条是否隐藏 68 if (scrollTop > 500) { 69 if (preScrollTop - scrollTop < 0) { 70 if (scrollDirection !== switchDirection) { 71 $(".slideHead").addClass("active"); 72 switchDirection = scrollDirection; 73 } 74 scrollDirection = 1; 75 }else if(preScrollTop - scrollTop > 0){ 76 if (scrollDirection !== switchDirection) { 77 $(".slideHead").removeClass("active"); 78 switchDirection = scrollDirection; 79 } 80 scrollDirection = 2; 81 } 82 }else{ 83 $(".slideHead").removeClass("active"); 84 } 85 if (preScrollTop !== scrollTop) { 86 preScrollTop = scrollTop; 87 } 88 }); 89 })