发布于 2017-01-28 07:48:30 | 303 次阅读 | 评论: 0 | 来源: 网友投递
这里有新鲜出炉的Javascript教程，程序狗速度看过来！
JavaScript客户端脚本语言
Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。
本文实例讲述了js实现仿百度瀑布流的方法。分享给大家供大家参考。具体实现方法如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>仿百度图片瀑布流</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="js/jquery.min.js"></script>
<style>
*{margin:0; padding:0;}
#container{
width: 1000px;
border:1px solid #f00;
margin: 50px auto;
position: relative;
}
#container img{
position: absolute;
}
#loader{
width: 100%;
height: 60px;
background: url(loader.gif) no-repeat center;
position: fixed;
bottom: 0;
left: 0;
}
</style>
</head>
<script type="text/javascript">
$(function(){
var oContainer=$('#container');
var oLoader=$('#loader');
var iWidth=200;//列宽
var iSpace=10;//列数
var iOuterWidth=iWidth+iSpace;
var sUrl = 'localhost/api/json/popular?callback=?';
var iCell=0;
var iPage=0;
var arrL=[];
var arrT=[];
var iBtn=true;
function setCells(){
iCell= Math.floor($(window).innerWidth()/iOuterWidth);
if(iCell < 3){
iCell =3;
}
if(iCell >6){
iCell =6;
}
oContainer.css('width',iOuterWidth*iCell-iSpace);
}
setCells();
for(var i=0;i < iCell; i++){
arrL.push(i*iOuterWidth);
arrT.push(0);
}
//console.log(arrL)
getData()
function getData(){
if(iBtn){
iBtn =false
oLoader.show();
$.getJSON(sUrl,'page='+iPage,function(data){
$.each(data,function(i,obj){
var $img =$('<img>');
$img.attr('src',obj.preview);
var iHeight= iWidth /obj.width * obj.height;
var index=getMin();
$img.appendTo(oContainer);
$img.css({width:iWidth,height: iHeight});
$img.css({top:arrT[index],left: arrL[index]})
arrT[index]+=iHeight +10;
oLoader.hide();
})
iPage++;
iBtn=true;
})
}
}
$(window).on('resize',function(){
var iOldCell= iCell;
setCells();
var iH = $(window).scrollTop()+$(window).innerHeight();
var iMinIndex= getMin();
if(arrT[iMinIndex]+oContainer.offset().top < iH){
getData();
}
if(iOldCell == iCell) return ;
arrT=[];
arrL=[];
for(var i=0;i < iCell; i++){
arrL.push(i*iOuterWidth);
arrT.push(0);
}
var $img = oContainer.find('img');
$img.each(function(index,obj){
var index=getMin();
$(this).animate({top:arrT[index],left: arrL[index]})
arrT[index]+=$(this).height() +10;
})
})
$(window).on('scroll',function(){
var iH = $(window).scrollTop()+$(window).innerHeight();
var iMinIndex= getMin();
if(arrT[iMinIndex]+oContainer.offset().top < iH){
getData();
}
})
function getMin(){
var iv= arrT[0];
var _index=0;
for(var i=0; i<arrT.length; i++){
if(arrT[i] < iv){
iv= arrT[i];
_index=i;
}
}
return _index ;
}
})
</script>
<body>
<div id="top">仿百度图片瀑布流</div>
<!--标题 e -->
<div id="container"></div>
<div id="loader"></div>
<!--效果块 e -->
</body>
</html>希望本文所述对大家的javascript程序设计有所帮助。