示例請求頭條數據

時間 2019-11-24

標籤示例請求頭條數據简体版

原文原文鏈接

<!DOCTYPE html>css

<html lang="en">html

<head>前端

<title>獲取頭條數據--瀑布流</title>c++

<style>web

*{margin:0;padding:0;list-style: none;text-decoration:none;}ajax

#Project{position:relative;width:1000px;margin:0 auto;top:50px;}json

</style>api

</head>跨域

<body>

<h1style="width:100%;text-align:center;background:#ED4040;color:#fff;position:fixed;top:0;left:0;z-index:9;box-shadow: 0 2px 5px #ccc;">今日頭條（科技類）</h1>

var pageNum=0;

var isc=0;//禁止連續滾動

makdom();

// 調用

function makdom(){

new waterfall({

container:'Project',

url:'https://www.toutiao.com/api/pc/feed/?category=news_tech&utm_source=toutiao&widen=1&max_behot_time=0&max_behot_time_tmp=0&tadrequire=false',

rowNum:6,

})

}

// 滾到底部時加載

var scrollFn= function (event){

var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

if(document.documentElement.scrollHeight == document.documentElement.clientHeight + scrollTop && isc==0) {

isc++;

makdom();

}

};

window.onmousewhell = window.onmousewheel = scrollFn;

window.addEventListener('DOMMouseScroll', scrollFn, false);

window.addEventListener('touchmove',scrollFn, false);

// 瀑布流處理，爲了方便跨域用jquey的ajax,jsonp

function waterfall(){

pageNum++;

console.log('讀到'+Number(pageNum)+'頁');

var MainBox=document.getElementById(arguments[0].container);

var rowNum=arguments[0].rowNum;

var colNum=0;

var itw=MainBox.offsetWidth/rowNum;

var loadmsg =document.createElement('div')

loadmsg.innerHTML='加載中';

loadmsg.style.cssText+='position:fixed;bottom:0;background:#fff;color:#666;text-align:center;width:100%;line-height:40px;'

document.body.appendChild(loadmsg);

// 獲取頭條數據，頭條好像每次只返回8條數據，console.log(Tdata)中查看

$.ajax({

url: arguments[0].url,

type: 'GET',

async:false,

dataType: 'jsonp',

success:function(Tdata){

var clis=document.createDocumentFragment();

//console.log(Tdata.data)

for(var i in Tdata.data){

var cli =document.createElement('li');

cli.style.cssText+='width:'+itw+'px;position:absolute;overfllow:hidden;visibility:hidden';

var cimg =(Tdata.data[i]['middle_image']!=undefined)?'<img src="'+Tdata.data[i]['middle_image']+'" style="display:block;margin:0 auto;width:100%;">':'';

cli.innerHTML='<a href="https://www.toutiao.com/'+Tdata.data[i]['source_url']+'" target="_blank"><div style="margin:5px;padding:5px;border-radius:4px;color:#666;border:1px solid #ccc;">'+cimg+'<h5>'+Tdata.data[i]['title']+'</h5></div></a>';

clis.appendChild(cli)

}

MainBox.appendChild(clis);

error: function(XMLHttpRequest, textStatus, errorThrown) {

console.log(textStatus)

MainBox.innerHTML='<h1 style="width:100%;text-align:center;line-height:100px;color:#666;">'+textStatus+':'+XMLHttpRequest.status+'</h1>'

}

})

//位置處理

setTimeout(function(){

isc=0;//能夠滾了

document.body.removeChild(loadmsg);//移除load