实现豆瓣图书

  1. //js
  2. function ajax({
  3.     url,
  4.     method,
  5.     success
  6. }){
  7.     var xhr = new XMLHttpRequest()
  8.     xhr.open(method,url,true)
  9.     xhr.send()
  10.     xhr.onreadystatechange = function(){
  11.         if(xhr.readyState == 4 && xhr.status == 200){
  12.             var result = JSON.parse(xhr.responseText);
  13.             success(result);
  14.         }
  15.     }
  16. }
  1.  <div id="app">
  2.         <div class="left">
  4.         </div> 
  5.     </div>
  6. <script>
  7.         var listUrl="http://192.168.4.18:8000/";
  8.         ajax({
  9.             url:listUrl,
  10.             method:"get",
  11.             success:res=>{
  12.                var arr = res.result;
  13.                arr.forEach((item,index)=>{
  14.                    var {pic,title,raiting,slogo,evaluate,labels} = item;
  15.                    var sum = labels.join("/")
  16.                    var htmlItem = `
  17.             <div class="item">
  18.                    <span id="span">${index+1}</span>
  19.                    <img src=${pic} alt="">
  20.                <div class="monddle">
  21.                   <p id="title">${title}</p>
  22.                   <p class="on">${sum}</p>
  23.                   <p class="on"><span>${raiting}</span>&nbsp;&nbsp;<span>${evaluate}人评价</span></p>
  24.                   <p class="on">${slogo}</p>
  25.               </div>
  26.            </div>
  27.                    `
  28.                    $(".left").append(htmlItem);
  29.                })
  30.             }
  31.         })   
  32. </script>

实现下拉刷新

  1. <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

style

  1.  .item {
  2.             float: left;
  3.             border: 1px solid #eee;
  4.         }
  6.         .item img {
  7.             width: 240px;
  8.             vertical-align: bottom;
  9.             padding: 5px;
  10.         }

内容

  1.  <div id="app">
  3.  </div>

js

  1.  http();
  2.         $(window).scroll(function(){
  3.            if(isReachBottom()){
  4.               http();
  5.            }
  6.         })
  7.         function http() {
  8.             var url = "http://192.168.4.18:8000/more"
  9.             $.ajax({
  10.                 url,
  11.                 success: res => {
  12.                     res.forEach(item => {
  13.                         var template = `
  14.                         <div class ="item">
  15.                           <img src = ${item.imageUrl}
  16.                         </div>  
  17.                     `
  18.                         $("#app").append(template)
  19.                     })
  20.                     setTimeout(sortBox, 100)
  21.                 }
  22.             })
  23.         }
  24.         function sortBox() {
  25.             /* 1.获取一排能放几个盒子 */
  26.             var ww = $(window).width();
  27.             var box = $(".item").width();
  28.             var num = Math.floor(ww / box);
  29.             var arr = [];
  30.             /* 2.将第一排的高度放到一个数组中 */
  31.             $(".item").each((index, item) => {
  32.                 if (index < num) {
  33.                     var height = $(item).outerHeight();
  34.                     arr.push(height)
  35.                 } else {
  36.                     /* 3.从最小高度的地方添加图片 */
  37.                     var minHeight = Math.min(...arr);
  38.                     var index = arr.indexOf(minHeight);
  39.                     var offsetLeft = $(".item").eq(index).offset().left;
  40.                     $(item).css({position:"absolute",top:minHeight,left:offsetLeft});
  41.                     arr[index] = minHeight + $(item).outerHeight();
  42.                 }
  43.             })
  44.         }
  46.         function isReachBottom(){
  47.             var scrollTop = $(window).scrollTop();
  48.             var availHeight = $(window).height();
  49.             var dh = $(document).height();
  50.             return (scrollTop+availHeight>dh-200)?true:false;
  51.         }

实现网页云下拉刷新

  1. <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  2. <script src="lib/http.js"></script>

http.js

  1. function http({
  2.     offset=0,
  3.     success
  4. }){
  5.     var url =`http://192.168.4.18:3000/top/playlist?cat=华语&limit=20&offset=${offset}`
  6.     $.ajax({
  7.         url,
  8.         success:res=>{
  9.             success(res)
  10.         }
  11.     })
  12. }
  1. <style>
  2.         .item img {
  3.             width: 150px;
  4.             height: 150px;
  5.             padding: 5px;
  6.         }
  8.         .item {
  9.             border: 1px solid #eee;
  10.             float: left;
  11.             margin-right: 80px;
  12.             margin-top: 50px;
  13.         }
  14.     </style>
  15. </head>
  17. <body>
  18.     <div id="app">
  20.     </div>
  21.     <script>
  22.         /* 第一http请求 */
  23.         loadData();
  24.         jump();
  25.         $(window).scroll(function(){
  26.             if(isReachBottom()){
  27.                 var offset = $(".item").length;
  28.                 loadData(offset)
  29.             }
  30.         })
  31.        function jump(){
  32.            setTimeout(()=>{
  33.                $(".item").click(function(event){
  34.                    let aid = event.currentTarget.dataset.aid;
  35.                    location.href = `datail.html?id=${aid}`
  36.                })
  37.            },200)
  38.        }
  39.         function isReachBottom() {
  40.             var scrollTop = $(window).scrollTop();
  41.             var availHeight = $(window).height();
  42.             var dh = $(document).height();
  43.             console.log(scrollTop + availHeight)
  44.             return (scrollTop + availHeight == dh) ? true : false;
  45.         }
  46.         function loadData(offset){
  47.                 http({
  48.                     offset,
  49.                     success: res => {
  50.                         var playlists = res.playlists;
  51.                         playlists.forEach(item => {
  52.                             var template = `
  53.                          <div class="item" data-aid=${item.id}>
  54.                             <img src=${item.coverImgUrl}>
  55.                          </div>   
  56.                       `
  57.                             $("#app").append(template)
  58.                         })
  59.                     }
  60.                 })
  61.             }
  62.     </script>

实现下拉刷新的瀑布流

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  9.     <style>
  10.         .item {
  11.             float: left;
  12.             border: 1px solid #eee;
  13.         }
  15.         .item img {
  16.             width: 240px;
  17.             vertical-align: bottom;
  18.             padding: 5px;
  19.         }
  20.     </style>
  21. </head>
  23. <body>
  24.     <div id="app">
  26.     </div>
  27.     <script>
  28.         http();
  29.         $(window).scroll(function(){
  30.            if(isReachBottom()){
  31.               http();
  32.            }
  33.         })
  34.         function http() {
  35.             var url = "http://192.168.4.18:8000/more"
  36.             $.ajax({
  37.                 url,
  38.                 success: res => {
  39.                     res.forEach(item => {
  40.                         var template = `
  41.                         <div class ="item">
  42.                           <img src = ${item.imageUrl}
  43.                         </div>  
  44.                     `
  45.                         $("#app").append(template)
  46.                     })
  47.                     setTimeout(sortBox, 100)
  48.                 }
  49.             })
  50.         }
  51.         function sortBox() {
  52.             /* 1.获取一排能放几个盒子 */
  53.             var ww = $(window).width();
  54.             var box = $(".item").width();
  55.             var num = Math.floor(ww / box);
  56.             var arr = [];
  57.             /* 2.将第一排的高度放到一个数组中 */
  58.             $(".item").each((index, item) => {
  59.                 if (index < num) {
  60.                     var height = $(item).outerHeight();
  61.                     arr.push(height)
  62.                 } else {
  63.                     /* 3.从最小高度的地方添加图片 */
  64.                     var minHeight = Math.min(...arr);
  65.                     var index = arr.indexOf(minHeight);
  66.                     var offsetLeft = $(".item").eq(index).offset().left;
  67.                     $(item).css({position:"absolute",top:minHeight,left:offsetLeft});
  68.                     arr[index] = minHeight + $(item).outerHeight();
  69.                 }
  70.             })
  71.         }
  73.         function isReachBottom(){
  74.             var scrollTop = $(window).scrollTop();
  75.             var availHeight = $(window).height();
  76.             var dh = $(document).height();
  77.             return (scrollTop+availHeight>dh-200)?true:false;
  78.         }
  79.     </script>
  80. </body>
  82. </html>