超级简单的瀑布流加载数据

最新推荐文章于 2024-05-28 14:53:32 发布

东都花神

最新推荐文章于 2024-05-28 14:53:32 发布

阅读量1.1w

点赞数 2

本文链接：https://blog.csdn.net/qq_33988065/article/details/64438658

版权

瀑布流是我们经常用到的加载方式，对于大量数据加载优化效果十分明显，这里我使用非常简单的代码来实现瀑布流，需要的朋友尽管copy：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="aplus-terminal" content="1">
  <meta name="apple-mobile-web-app-title" content="">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
 
    <meta name="format-detection" content="telephone=no, address=no">
   
  <title>title</title>
  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
  <style type="text/css">
    .main{
      text-align: center;
    }
  	.item{
  	  width: 224px;
  	  margin: 10px;
  	  display: inline-block;
  	}
  	.item img{
  	  width: 100%;
  	}
  	.price{
  	  color: red;
  	  display: flex;
  	  justify-content: space-between;
  	}
  	.title{
  	  width: 100%;
  	  text-align: left;
  	  overflow: hidden;
  	  white-space: nowrap;
  	  text-overflow: ellipsis;
  	}
  </style>
</head>
<body>
    <div class="main">
      
    </div>
    <button class="btn btn-success more">加载更多</button>
    <script type="text/javascript">
      let [page, jQuery112409721827272010266_1489999092199] = [0, ''];
      let = dataUrl = `http://mce.meilishuo.com/jsonp/get/3?callback=jQuery112409721827272010266_1489999092199&offset=0&frame=8&trace=0&limit=10&endId=0&pid=38369&page=${page}&_=1489999092221`
      //初始化页面数据
      if (document.body.scrollHeight === window.innerHeight) {
      	askData(dataUrl);
      }
      //点击加载更多
      $('.more').on('click', function () {
          askData(dataUrl);
      })
      
      
      
      
      //滚动加载
      window.onscroll = function () {
          page++
          var height = document.body.scrollHeight - document.body.scrollTop - window.innerHeight
          if (height < 400 && page%3 === 0) {
          		askData(dataUrl);
        	}
      }
      
      
      
      //异步请求数据
      function askData(url) {
        $.ajax({
          type:"get",
          url: url,
          dataType: 'jsonp',
          jsonp: 'callback',
          async:true,
          success: function (res) {
              loadDOM(res.data.list);
          },
          error: function (err) {
              console.log(err)
          }
        });
      }
      //加载数据到页面
      function loadDOM (data) {
        for (let i in data) {
          let html = `<div class="item">
                        <img src="${data[i].image}"/>
                        <p class="price"><span>价格:${data[i].price}</span><span>收藏：${data[i].itemSale}</span></p>
                        <p class="title">${data[i].title}</p>
                      </div>`
          $(html).appendTo('.main')
        }
      }
    </script>
</body>
</html>

在线浏览

东都花神

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
3
评论
超级简单的瀑布流加载数据

瀑布流是我们经常用到的加载方式，对于大量数据加载优化效果十分明显，这里我使用非常简单的代码来实现瀑布流，需要的朋友尽管copy：<!doctype html><html lang="en"><head> <meta charset="UTF-8"/> <meta name="aplus-terminal" content="1"> <meta na
复制链接

扫一扫