js-Methode zur Nachahmung der Flow_Javascript-Fähigkeiten des Baidu-Wasserfalls-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

js-Methode zur Nachahmung der Flow_Javascript-Fähigkeiten des Baidu-Wasserfalls

May 16, 2016 pm 04:15 PM

js 方法瀑布流

Das Beispiel in diesem Artikel beschreibt die Methode zur Verwendung von js zur Nachahmung des Baidu-Wasserfallflusses. Teilen Sie es als Referenz mit allen. Die spezifische Implementierungsmethode lautet wie folgt:

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;title&gt;仿百度图片瀑布流&lt;/title&gt;
&lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
&lt;script src="js/jquery.min.js"&gt;&lt;/script&gt;
&lt;style&gt;
*{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;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;script type="text/javascript"&gt;
$(function(){
 var oContainer=$('#container');
 var oLoader=$('#loader');
 var iWidth=200;//列宽
 var iSpace=10;//列数
 var iOuterWidth=iWidth+iSpace;
 var sUrl = 'localhost/api/json/popular&#63;callback=&#63;';
 var iCell=0;
 var iPage=0;
 var arrL=[];
 var arrT=[];
 var iBtn=true;
 
 function setCells(){
  iCell= Math.floor($(window).innerWidth()/iOuterWidth);
  if(iCell &lt; 3){
   iCell =3;
  }
  if(iCell &gt;6){
   iCell =6;
  }
  oContainer.css('width',iOuterWidth*iCell-iSpace);
 }
 setCells();
 for(var i=0;i &lt; 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 =$('&lt;img&gt;');
     $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 &lt; iH){
   getData();
  }
  if(iOldCell == iCell) return ;
  arrT=[];
  arrL=[];
  for(var i=0;i &lt; 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 &lt; iH){
   getData();
  }
 })
 function getMin(){
  var iv= arrT[0];
  var _index=0;
  for(var i=0; i&lt;arrT.length; i++){
   if(arrT[i] &lt; iv){
    iv= arrT[i];
    _index=i;
   }
  }
  return _index ;
 }
})
&lt;/script&gt;
&lt;body&gt;
 &lt;div id="top"&gt;仿百度图片瀑布流&lt;/div&gt; 
 &lt;!--标题 e --&gt;
 &lt;div id="container"&gt;&lt;/div&gt;
 &lt;div id="loader"&gt;&lt;/div&gt;
 &lt;!--效果块 e --&gt;
&lt;/body&gt;
&lt;/html&gt;

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn