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 相关文章推荐
IE与Firefox在JavaScript上的7个不同句法分享
Oct 30 Javascript
js新闻滚动 js如何实现新闻滚动效果
Jan 07 Javascript
浅析JavaScript中的typeof运算符
Nov 30 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
Jan 31 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
Aug 07 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
May 18 Javascript
node网页分段渲染详解
Sep 05 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
Dec 05 Javascript
深入探究angular2 UI组件之primeNG用法
Jul 26 Javascript
微信小程序 动画的简单实例
Oct 12 Javascript
JS实现select选中option触发事件操作示例
Jul 13 Javascript
jQuery实现小火箭返回顶部特效
Feb 03 jQuery
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 is_null、empty、isset的区别
2015/07/07 PHP
php微信公众号开发模式详解
2016/11/28 PHP
PHP jpgraph库的配置及生成统计图表:折线图、柱状图、饼状图
2017/05/15 PHP
PHP递归统计系统中代码行数
2019/09/19 PHP
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
2011/10/29 Javascript
JQuery中SetTimeOut传参问题探讨
2013/05/10 Javascript
JavaScript函数模式详解
2014/11/07 Javascript
node.js中的fs.symlink方法使用说明
2014/12/15 Javascript
使用VS开发 Node.js指南
2015/01/06 Javascript
代码分析jQuery四种静态方法使用
2015/07/23 Javascript
基于Vue.js的表格分页组件
2016/05/22 Javascript
同步文本框内容JS代码实现
2016/08/04 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
2016/12/28 Javascript
js实现适配不同的屏幕大小
2017/04/10 Javascript
详解vue的数据binding绑定原理
2017/04/12 Javascript
在bootstrap中实现轮播图实例代码
2017/06/11 Javascript
默认浏览器设置及vue自动打开页面的方法
2018/09/21 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
2019/05/05 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
2019/09/16 Javascript
Vue切换div显示隐藏,多选,单选代码解析
2020/07/14 Javascript
JavaScript事件循环及宏任务微任务原理解析
2020/09/02 Javascript
python获取当前计算机cpu数量的方法
2015/04/18 Python
Python Unittest自动化单元测试框架详解
2018/04/04 Python
python抓取需要扫微信登陆页面
2019/04/29 Python
Flask框架学习笔记之消息提示与异常处理操作详解
2019/08/15 Python
解决Pycharm 包已经下载,但是运行代码提示找不到模块的问题
2019/08/31 Python
Python笔记之代理模式
2019/11/20 Python
使用Python解析Chrome浏览器书签的示例
2020/11/13 Python
回馈慈善的设计师太阳镜:DIFF eyewear
2019/10/17 全球购物
党课学习思想汇报
2014/01/02 职场文书
公司开业庆典策划方案
2014/06/04 职场文书
2014年体育工作总结
2014/11/24 职场文书
员工自我工作评价
2015/03/06 职场文书
可怜妈妈观后感
2015/06/09 职场文书
于丹讲座视频观后感
2015/06/15 职场文书
MySQL令人咋舌的隐式转换
2021/04/05 MySQL