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中的变量作用域进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • fmt:formatDate的输出格式详解

    fmt:formatDate的输出格式详解

    本篇文章主要是对fmt:formatDate的输出格式进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • JS+HTML5 Canvas实现简单的写字板功能示例

    JS+HTML5 Canvas实现简单的写字板功能示例

    这篇文章主要介绍了JS+HTML5 Canvas实现简单的写字板功能,结合实例形式分析了js结合HTML5 canvas特性的图形绘制相关操作技巧,需要的朋友可以参考下
    2018-08-08
  • layui表单提交到后台自动封装到实体类的方法

    layui表单提交到后台自动封装到实体类的方法

    今天小编就为大家分享一篇layui表单提交到后台自动封装到实体类的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 用原生JS对AJAX做简单封装的实例代码

    用原生JS对AJAX做简单封装的实例代码

    下面小编就为大家带来一篇用原生JS对AJAX做简单封装的实例代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • 解决小程序无法触发SESSION问题

    解决小程序无法触发SESSION问题

    这篇文章主要介绍了解决小程序无法触发SESSION问题,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-02-02
  • SVG动画vivus.js库使用小结(实例代码)

    SVG动画vivus.js库使用小结(实例代码)

    本文通过代码给大家介绍SVG动画vivus.js库使用小结,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2017-09-09
  • javascript 节点排序 2

    javascript 节点排序 2

    对支持sourceIndex的HTML文档的节点重排,使用JK提供的思路,速度至少比单纯使用nodes.sort(function(a,b){return a.sourceIndex - b.sourceIndex})这种方式快两倍
    2011-01-01
  • 用一段js程序来实现动画功能

    用一段js程序来实现动画功能

    用一段js程序来实现动画功能...
    2007-03-03
  • webpack构建的详细流程探底

    webpack构建的详细流程探底

    目前,几乎所有业务的开发构建都会用到 webpack 。所以下面这篇文章主要给大家介绍了关于webpack构建的详细流程的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2018-01-01

最新评论