脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js实现仿百度瀑布流

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

 更新时间：2015年02月05日 15:10:26   作者：magicfly9527  
这篇文章主要介绍了js实现仿百度瀑布流的方法,以完整实例形式分析了js仿百度瀑布流的相关样式与实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了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 函数的定义-调用、注意事项

    这篇文章主要介绍了JavaScript 函数的定义-调用、注意事项,需要的朋友可以参考下
    2017-04-04
  • TS中type和interface的区别解析

    TS中type和interface的区别解析

    对于type来说，更多的是对类型的一种复用，比如在项目中需要用到一些比较复杂的或者书写起来很长的类型，而对于 interface来说，它是正儿八经的用来定义接口类型（约束数类型和属性）的，且接口类型是支持继承和声明合并的，感兴趣的朋友跟随小编一起看看吧
    2023-07-07
  • 显示js对象所有属性和方法的函数

    显示js对象所有属性和方法的函数

    显示js对象所有属性和方法，从网上整理了不少，大家可以看下原理都是差不多的。
    2009-10-10
  • js实现Select头像选择实时预览代码

    js实现Select头像选择实时预览代码

    这篇文章主要介绍了js实现Select头像选择实时预览代码,涉及javascript动态遍历及设置select选项的技巧,非常简单实用,需要的朋友可以参考下
    2015-08-08
  • 使用JS的DOM文档对象模型获取前端循环的参数

    使用JS的DOM文档对象模型获取前端循环的参数

    这篇文章主要介绍了使用JS的DOM（文档对象模型）获取前端循环的参数,本文结合实例代码给大家介绍的非常详细，需要的朋友可以参考下
    2023-02-02
  • JavaScript数组排序的六种常见算法总结

    JavaScript数组排序的六种常见算法总结

    这篇文章主要给大家介绍了关于JavaScript数组排序的六种常见算法，文中通过示例代码介绍的非常详细，对大家的学习或者使用JavaScript数组具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2020-08-08
  • js 判断附件后缀的简单实现方法

    js 判断附件后缀的简单实现方法

    下面小编就为大家带来一篇js 判断附件后缀的简单实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • 原生JavaScript生成GUID的实现示例

    原生JavaScript生成GUID的实现示例

    GUID（全局统一标识符）是指在一台机器上生成的数字，下面为大家介绍下原生JavaScript生成GUID的实现，需要的朋友不要错过
    2014-09-09
  • IE事件对象（The Internet Explorer Event Object）

    IE事件对象（The Internet Explorer Event Object）

    不同于DOM事件对象，基于Event Handler授权这种方式，IE事件对象可以用不同的方式进行访问。当一个事件Handler通过DOM 0 级的方式被授权，则这个事件对象将作为window对象的属性而存在
    2012-06-06
  • js模拟实现京东详情页图片放大效果

    js模拟实现京东详情页图片放大效果

    这篇文章主要为大家详细介绍了js模拟实现京东详情页图片放大效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-11-11

最新评论