js实现仿百度瀑布流的方法


Posted in Javascript onFebruary 05, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
javascript高亮效果的二种实现方法
Sep 14 Javascript
js弹出层之1:JQuery.Boxy (二)
Oct 06 Javascript
中文路径导致unitpngfix.js不正常的解决方法
Jun 26 Javascript
非常好用的JsonToString 方法 简单实例
Jul 18 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
Jan 26 Javascript
javascript实现详细时间提醒信息效果的方法
Mar 11 Javascript
JQuery自动触发事件的方法
Jun 13 Javascript
实例讲解js验证表单项是否为空的方法
Jan 09 Javascript
谈一谈javascript闭包
Jan 28 Javascript
JS中innerHTML和pasteHTML的区别实例分析
Jun 22 Javascript
微信小程序中做用户登录与登录态维护的实现详解
May 17 Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
Sep 03 Javascript
JS函数this的用法实例分析
Feb 05 #Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
Feb 05 #Javascript
js关于命名空间的函数实例
Feb 05 #Javascript
js实现数字每三位加逗号的方法
Feb 05 #Javascript
javascript实现字符串反转的方法
Feb 05 #Javascript
Javascript中拼接大量字符串的方法
Feb 05 #Javascript
jquery操作select方法汇总
Feb 05 #Javascript
You might like
php中将网址转换为超链接的函数
2011/09/02 PHP
php获取访问者IP地址汇总
2015/04/24 PHP
php生成gif动画的方法
2015/11/05 PHP
全面解读PHP的Yii框架中的日志功能
2016/03/17 PHP
Laravel框架模型的创建及模型对数据操作示例
2019/05/07 PHP
JS 容错处理代码, 屏蔽错误信息
2021/03/09 Javascript
JavaScript中的作用域链和闭包
2012/06/30 Javascript
JavaScript设计模式之适配器模式介绍
2014/12/28 Javascript
简单谈谈javascript代码复用模式
2015/01/28 Javascript
js实现的奥运倒计时时钟效果代码
2015/12/09 Javascript
浅谈js构造函数的方法与原型prototype
2016/07/04 Javascript
原生js实现倒计时--2018
2017/02/21 Javascript
简单谈谈原生js的math对象
2017/06/27 Javascript
webuploader实现上传图片到服务器功能
2018/08/16 Javascript
vscode 开发Vue项目的方法步骤
2018/11/25 Javascript
JS函数基本定义与用法示例
2020/01/15 Javascript
[03:55]显微镜下的DOTA2特别篇——430灰烬之灵神级操作
2014/06/24 DOTA
[02:10]DOTA2亚洲邀请赛 EG战队出场宣传片
2015/02/07 DOTA
[56:46]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VP vs Effect
2018/04/01 DOTA
python进阶教程之循环对象
2014/08/30 Python
python3 shelve模块的详解
2017/07/08 Python
python 删除指定时间间隔之前的文件实例
2018/04/24 Python
python代码过长的换行方法
2018/07/19 Python
浅谈python连续赋值可能引发的错误
2018/11/10 Python
Python批量生成特定尺寸图片及图画任意文字的实例
2019/01/30 Python
Python实现微信中找回好友、群聊用户撤回的消息功能示例
2019/08/23 Python
scrapy结合selenium解析动态页面的实现
2020/09/28 Python
意大利在线药房:shop-farmacia.it
2019/03/12 全球购物
Madewell澳大利亚官方网站:美国休闲服饰品牌
2019/07/18 全球购物
美国基督教约会网站:ChristianCafe.com
2020/02/04 全球购物
描述RIP和OSPF区别以及特点
2015/01/17 面试题
会计电算化专业个人的自我评价
2013/11/24 职场文书
房产转让协议书(2014版)
2014/09/30 职场文书
2014年优质护理服务工作总结
2014/11/14 职场文书
淮阳太昊陵导游词
2015/02/10 职场文书
助学金申请书该怎么写?
2019/07/16 职场文书