<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
????<meta?http-equiv="X-UA-Compatible"?content="ie=edge">
????<title>Document</title>
????<script?src="jsonp.js"></script>
????<link?rel="stylesheet"?href="css/index.css"?/>
</head>
<body>
????<div?class="wrap">
????????<div?class="headerContainer">
????????????<img?src="https://s10.mogucdn.com/mlcdn/c45406/190102_088f4i166l4gkl08k297h5kk8690i_260x200.png">
????????????<div?class="catalog">
????????????????目錄
????????????</div>
????????????<div?class="searchContainer">
????????????????<input?type="text"?class="searchInput"?/>
????????????????<button?class="btn"></button>
????????????</div>
????????????<div?class="iconShow">
????????????????<span?class="iconMessage"></span>
????????????????消息
????????????</div>
????????????<div?class="iconShow">
????????????????<span?class="iconCollect"></span>
????????????????收藏
????????????</div>
????????</div>
????????<h3?class="sub_title">
????????????全部食品
????????</h3>
????????<div?class="nav_box">
????????????<div?class="txt">
????????????????<span>￥</span>
????????????</div>
????????????<span?class="divid">-</span>
????????????<div?class="txt">
????????????????<span>￥</span>
????????????</div>
????????????<a?class="confirm_btn"?href="javascript:;">確定</a>
????????</div>
????????<div?class="itemContainer">
????????????<!--?商品呈現(xiàn)?-->
????????????<!--?<div?class="item">
????????????????<img
????????????????????src="https://s11.mogucdn.com/mlcdn/c45406/180830_0ggfhcfd757g3jg8k8fjaclc3h123_640x960.jpg_440x587.v1cAC.40.webp"?/>
????????????????<div?class="bottom-describe">
????????????????????<p?class="describe">
????????????????????????海底撈火鍋1盒懶人自煮自熱方便速食牛油麻辣即食小火鍋麻辣火鍋
????????????????????</p>
????????????????????<div?class="priceContainer">
????????????????????????<b>￥26.8</b>
????????????????????????<span?class="oldPrice">￥53.6</span>
????????????????????????<span?class="mystar">
????????????????????????????<img?src="https://s18.mogucdn.com/p2/160908/upload_27g4f1ch6akie83hacb676j622b9l_32x30.png"
????????????????????????????????alt=""?/>
????????????????????????????2585
????????????????????????</span>
????????????????????</div>
????????????????</div>
????????????</div>?-->
????????</div>
????</div>
</body>
<script>
????let?page?=?1;
????getData();
????function?getData()?{
????????ajax({
????????????url:?"https://list.mogu.com/search",
????????????data:?{
????????????????_version:?8193,
????????????????ratio:?"3%3A4",
????????????????cKey:?15,
????????????????page:?page,
????????????????sort:?"pop",
????????????????ad:?0,
????????????????fcid:?52014,
????????????????action:?"food"
????????????},
????????????dataType:?"jsonp",
????????????jsonp:?"callback",
????????????success:?function?(res)?{
????????????????if?(res.status.code?==?1001)?{
????????????????????page++;
????????????????????let?data?=?res.result.wall.docs;
????????????????????//?console.log(data);
????????????????????data.forEach(item?=>?{
????????????????????????createEelement(item);
????????????????????})
????????????????}
????????????}
????????})
????}
????function?createEelement(item)?{
????????console.log(item);
????????let?mydiv?=?document.createElement("div");
????????mydiv.classList?=?"item";
????????mydiv.innerHTML?=?`<img
????????????????????src="${item.img}"?/>
????????????????????<div?class="bottom-describe">
????????????????????????<p?class="describe">
????????????????????????????${item.title}
????????????????????????</p>
????????????????????????<div?class="priceContainer">
????????????????????????????<b>￥${item.price}</b>
????????????????????????????<span?class="oldPrice">￥${item.orgPrice}</span>
????????????????????????????<span?class="mystar">
????????????????????????????????<img?src="https://s18.mogucdn.com/p2/160908/upload_27g4f1ch6akie83hacb676j622b9l_32x30.png"
????????????????????????????????????alt=""?/>
????????????????????????????????${item.cfav}
????????????????????????????</span>
????????????????????????</div>
????????????????????</div>`;
????????????????document.querySelector(".itemContainer").appendChild(mydiv);
????}
????//下拉加載數(shù)據(jù)；
????document.onscroll?=?function(){
????????let?windowHeight?=?document.documentElement.clientHeight;
????????let?contentHeight?=?document.documentElement.offsetHeight;
????????let?scrollHeight?=?contentHeight?-?windowHeight;
????????let?scrollTop?=?document.documentElement.scrollTop;
????????if(scrollTop>=(scrollHeight-10)){
????????????getData();
????????}
????}
</script>
</html>
