<!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>
<h1 style="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‘,
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
WEB前端互动交流群 434623999
