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实现滚动图片新闻的实例代码
Nov 27 Javascript
深入理解Javascript作用域与变量提升
Dec 09 Javascript
jquery清空表单数据示例分享
Feb 13 Javascript
js获取当前日期前七天的方法
Feb 28 Javascript
jQuery模仿单选按钮选中效果
Jun 24 Javascript
Bootstrap table表格简单操作
Feb 07 Javascript
用原生JS实现简单的多选框功能
Jun 12 Javascript
Vue实现导航栏点击当前标签变色功能
Aug 19 Javascript
详解element-ui设置下拉选择切换必填和非必填
Jun 17 Javascript
记录vue做微信自定义分享的一些问题
Sep 12 Javascript
JavaScript实现瀑布流布局的3种方式
Dec 27 Javascript
vue实现Toast组件轻提示
Apr 10 Vue.js
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
discuz程序的PHP加密函数原理分析
2011/08/05 PHP
php笔记之:有规律大文件的读取与写入的分析
2013/04/26 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
php workerman定时任务的实现代码
2018/12/23 PHP
laravel框架实现去掉URL中index.php的方法
2019/10/12 PHP
windows系统下简单nodejs安装及环境配置
2013/01/08 NodeJs
JQuery页面的表格数据的增加与分页的实现
2013/12/10 Javascript
JavaScript中使用Object.create()创建对象介绍
2014/12/30 Javascript
JavaScript取得键盘按下方向键是哪个的方法
2015/08/04 Javascript
AngularJS 实现按需异步加载实例代码
2015/10/18 Javascript
js+html5实现的自由落体运动效果代码
2016/01/28 Javascript
JavaScript导航脚本判断当前导航
2016/07/12 Javascript
JavaScript用JSONP跨域请求数据实例详解
2017/01/06 Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
2017/05/10 Javascript
js实现简单进度条效果
2020/03/25 Javascript
js函数柯里化的方法和作用实例分析
2020/04/11 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
2020/09/27 Javascript
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
2020/12/19 Vue.js
ubuntu安装sublime3并配置python3环境的方法
2018/03/15 Python
Selenium执行完毕未关闭chromedriver/geckodriver进程的解决办法(java版+python版)
2020/12/07 Python
Python-split()函数实例用法讲解
2020/12/18 Python
Python实现京东抢秒杀功能
2021/01/25 Python
python爬虫利用代理池更换IP的方法步骤
2021/02/21 Python
AmazeUi Tree(树形结构) 应用小结
2020/08/17 HTML / CSS
Dockers美国官方网站:卡其裤、男士服装、鞋及配件
2016/11/22 全球购物
澳大利亚时尚前卫设计师珠宝在线:Amber Sceats
2017/10/04 全球购物
Banana Republic欧盟:美国都市简约风格的代表品牌
2018/05/09 全球购物
俄罗斯一家时尚女装商店:Charuel
2019/12/04 全球购物
DBA数据库管理员JAVA程序员架构师必看
2016/02/07 面试题
SQL里面IN比较快还是EXISTS比较快
2012/07/19 面试题
连锁经营管理专业大学生求职信
2013/10/30 职场文书
高中化学教学反思
2014/01/13 职场文书
考试作弊检讨书
2014/10/21 职场文书
2014年教学管理工作总结
2014/12/02 职场文书
CSS的class与id常用的命名规则
2021/05/18 HTML / CSS