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

2019-11-20 13:13:02

字体：大中小

来源：转载

供稿：网友

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

上一篇：js实现照片墙功能实例

下一篇：JS函数this的用法实例分析