首页手记 2017-03-27 AJAX实例（学渣的忏悔）

2017-03-27 AJAX实例（学渣的忏悔）

标签：

JavaScript

<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<tittle></tittle>
<style>
*{    
    margin:0px;    
    padding:0px;
}
ul{
    list-style:none;
    width:620px;    
    margin:0 auto;
    background:#eee;
    overflow:hidden;
    padding:20px;
}
li{
    float:left；
    width:300px;
    background:#fff;
    border-radius:5px;
    margin:5px;
}
li>div{
    width:100%;
    height:200px;
    overflow:hidden;
    padding:5px;
    box-sizing:border-box;
}
li>div>img{
    width:100%;
    height:auto;
    min-height:100%;
}
h6,p{
    font-size:14px;
    height:30px;
    line-height:30px;
    padding-left:20px;
    font-weight:normal;
}
</style>
</head>
<body>
<ul id="list">
    <li>
        <div><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../images/1.jpg" /></div>
        <h6>商品名称1</h6>       
        <p>￥1.00</p>
   </li>
   <li>
        <div><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../images/2.jpg" /></div>
        <h6>商品名称1</h6>       
        <p>￥1.00</p>
   </li>
   <li>
         <div><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../images/3.jpg" /></div>
         <h6>商品名称1</h6>
         <p>￥1.00</p>
   </li>
   <li>
        <div><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../images/4.jpg" /></div>
        <h6>商品名称1</h6>
        <p>￥1.00</p>
   </li>
    <li>
        <div><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../images/5.jpg" /></div>
        <h6>商品名称1</h6>
        <p>￥1.00</p>   
    </li>    
    <li>
        <div><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../images/1.jpg" /></div>
        <h6>商品名称1</h6>
        <p>￥1.00</p>
   </li>
   <li>
       <div><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../images/2.jpg" /></div>
       <h6>商品名称1</h6>
       <p>￥1.00</p>
   </li>   
   <li>
        <div><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../images/3.jpg" /></div>
        <h6>商品名称1</h6>
        <p>￥1.00</p>
   </li>
   <li>
        <div><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../images/4.jpg" /></div>
        <h6>商品名称1</h6>
        <p>￥1.00</p>
   </li>
   <li>
        <div><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../images/5.jpg" /></div>
        <h6>商品名称1</h6>
        <p>￥1.00</p>
   </li>
</ul>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="ajax.js"></script>
<script>
var jsonDat;
var winHeight=document.documentElement.clientHeight||document.body.clientHeight;
var list=document.getElementById("list");
var bSend=true;var num=10;var startNum=0;
    window.onscroll=function(){
          var st=document.documentElement.scrollTop||document.body.scrollTop;
          var sh=document.documentElement.scrollHeight||document.body.scrollHeight;
          if(sh-st-winHeight<50){
               if(bSend){
                    ajax("get","data.json",function(res){
                          bSend=false;
                          var jsonDat=JSON.parse(res);
                          var htm="";
                          for(var i=startNum;i<num;i++){
                               if(jsonDat[i]){
                                    htm+="<li>"+
                                          "<div><img src='"+jsonDat[i].img+"' /></div>"+
                                         "<h6>"+jsonDat[i].title+"</h6>"+
                                          "<p>￥"+jsonDat[i].price+"</p>"+
                                          "</li>"
                                    bSend=true;
                               }else{
                                    console.log("没有更多数据了");
                                    break;
                                    bSend=false;
                               }
                          }
                          list.innerHTML+=htm;
                          startNum=num;
                          num+=startNum;
                          console.log("获取数据")
                    })
               }
          }
    }
</script>
</body>
</html>

点击查看更多内容