您的位置：首页 > 其它

示例请求头条数据

2017-11-23 00:00 281 查看

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>获取头条数据--瀑布流</title>

<style>

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

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

</style>

</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>

<ul id="Project"></ul>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

<script>

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

var topVs=[];//存着top值

for(var i =0;i<MainBox.children.length;i++){

// console.log(MainBox.children[i].clientHeight)

var kNum=i%rowNum;

//模拟在dom里的坐标

var leftV=kNum*itw;//x轴

var topV=0;//y轴

if(kNum==0)colNum++;

topV=(i<rowNum)?0:MainBox.children[i-rowNum].clientHeight+topVs[i-rowNum];

topVs.push(topV)

MainBox.children[i].style.cssText+='left:'+leftV+'px;top:'+topV+'px;visibility:visible;';

}

},1000)

}

</script>

</body>

</html>
web前端互动交流群434623999

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航