欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

详解照片瀑布流效果(js,jquery分别实现与知识点总结)

程序员文章站 2022-05-30 20:35:11
看了网上的瀑布流教程,自己跟着写了遍,然后总结了下知识点 ...

看了网上的瀑布流教程,自己跟着写了遍,然后总结了下知识点

<!doctype html> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<script type="text/javascript" src="jquery-1.8.3.min.js"/></script> 
<script type="text/javascript" src="script2.js"/></script> 
<title></title> 
<style type="text/css"> 
 *{padding: 0;margin:0;} 
 #main{ 
  margin-top: 10px; 
  position: relative; 
 
 } 
 .pin{ 
  margin:0; 
  padding:0 0 5px 3px; 
  float:left; 
 } 
 .box{ 
  padding: 10px 5px 0 5px; 
  border:1px solid #ccc; 
  box-shadow: 0 0 6px #ccc; 
  border-radius: 5px; 
 } 
 .box img{ 
  border:0; 
  margin:0; 
  width:200px; 
  height:auto; 
 } 
</style> 
</head> 
<body> 
<div id="main"> 
 <div class="pin"> 
  <div class="box"> 
   <img src="images/1.jpg"/> 
  </div> 
 </div> 
 <div class="pin"> 
  <div class="box"> 
   <img src="images/2.jpg"/> 
  </div> 
 </div> 
 <div class="pin"> 
  <div class="box"> 
   <img src="images/3.jpg"/> 
  </div> 
 </div> 
 <div class="pin"> 
  <div class="box"> 
   <img src="images/4.jpg"/> 
  </div> 
 </div> 
 <div class="pin"> 
  <div class="box"> 
   <img src="images/5.jpg"/> 
  </div> 
 </div> 
 <div class="pin"> 
  <div class="box"> 
   <img src="images/6.jpg"/> 
  </div> 
 </div> 
 <div class="pin"> 
  <div class="box"> 
   <img src="images/7.jpg"/> 
  </div> 
 </div> 
 <div class="pin"> 
  <div class="box"> 
   <img src="images/8.jpg"/> 
  </div> 
 </div> 
 <div class="pin"> 
  <div class="box"> 
   <img src="images/9.jpg"/> 
  </div> 
 </div> 
 <div class="pin"> 
  <div class="box"> 
   <img src="images/1.jpg"/> 
  </div> 
 </div> 
 <div class="pin"> 
  <div class="box"> 
   <img src="images/2.jpg"/> 
  </div> 
 </div> 
 <div class="pin"> 
  <div class="box"> 
   <img src="images/3.jpg"/> 
  </div> 
 </div> 
 <div class="pin"> 
  <div class="box"> 
   <img src="images/4.jpg"/> 
  </div> 
 </div> 
 <div class="pin"> 
  <div class="box"> 
   <img src="images/5.jpg"/> 
  </div> 
 </div> 
 <div class="pin"> 
  <div class="box"> 
   <img src="images/6.jpg"/> 
  </div> 
 </div> 
 <div class="pin"> 
  <div class="box"> 
   <img src="images/7.jpg"/> 
  </div> 
 </div> 
 <div class="pin"> 
  <div class="box"> 
   <img src="images/8.jpg"/> 
  </div> 
 </div> 
 <div class="pin"> 
  <div class="box"> 
   <img src="images/9.jpg"/> 
  </div> 
 </div> 
 <div class="pin"> 
  <div class="box"> 
   <img src="images/1.jpg"/> 
  </div> 
 </div> 
 <div class="pin"> 
  <div class="box"> 
   <img src="images/2.jpg"/> 
  </div> 
 </div> 
 <div class="pin"> 
  <div class="box"> 
   <img src="images/3.jpg"/> 
  </div> 
 </div> 
</div> 
</body> 
</html> 

用js实现部分:

window.onload=function(){ 
  
 waterfall('main','box'); 
  var dataimg={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'},{'src':'5.jpg'},{'src':'6.jpg'},{'src':'7.jpg'},{'src':'8.jpg'},{'src':'9.jpg'}]}; 
  
  window.onscroll=function() 
  { 
   if(checkscrollside()) 
   { 
    var main= document.getelementbyid('main'); 
    for(var i=0;i<dataimg.data.length;i++) 
    { 
     var pin=document.createelement('div'); 
     pin.classname='pin';     
     main.appendchild(pin);    
     var box=document.createelement('div'); 
     box.classname='box'; 
     pin.appendchild(box); 
     var img=document.createelement('img'); 
     img.src='images/'+dataimg.data[i].src; 
     box.appendchild(img); 
    } 
    waterfall('main','box'); 
   }; 
  } 
}   
 
function $$(clsname,ele) 
{ 
 //如果当前浏览器支持通过类名获取元素,直接返回 
 if(document.getelementsbyclassname) 
 { 
  return(ele||document).getelementsbyclassname(clsname); 
 } 
 else 
 { 
  //尽量把这些量存放在变量中,否则 
  //例如循环不用len,而用nodes.length,会每一次循环都遍历一次 
  var nodes=(ele||document).getelementsbytagname("*"), 
  eles=[], 
  len=nodes.length 
  i, 
  j, 
  currnode, 
  clsnames, 
  clslen; 
  for(i=0;i<len;i++) 
  { 
   currnode=nodes[i]; 
   clsnames=currnode.classname.split(' '); 
   clslen=clsnames.length; 
   for(j=0;j<clslen;j++) 
   { 
    if(clsnames[j]==clsname) 
    { 
  eles.push(currnode); 
      break; 
    } 
   } 
  } 
  return eles; 
 } 
} 
//知识点一:js中通过属性offset--等,但padding,margin等只能获取在内联html中有的样式, 
//因此,下面这个函数是获取css样式的通用函数。 
var getstyle = function(dom, attr) 
{ 
 return dom.currentstyle ? dom.currentstyle[attr] : getcomputedstyle(dom, false)[attr]; 
} 
 function waterfall(parent,box){ 
  var main=document.getelementbyid(parent); 
  var boxes=$$(box,main); 
   var pins=$$('pin',main); 
  //console.log(boxes.length); 
   var pinw=pins[0]; 
  var boxw=boxes[0].offsetwidth+parseint(getstyle(pinw,'paddingleft')); 
  console.log(boxes[0].clientwidth); 
  //console.log(boxw+','+main.clientwidth+','+main.offsetwidth+','+getstyle(boxes[0],'margin')); 
  var cols=math.floor(document.documentelement.clientwidth/boxw); 
   console.log(cols); 
  main.style.width=cols*boxw+'px'; 
  var boxesh=[]; 
  for(var i=0;i<boxes.length;i++){ 
   if(i<cols){ 
    boxesh.push(boxes[i].offsetheight+parseint(getstyle(pinw,'paddingbottom'))); 
   } 
   else{ 
    var minh=math.min.apply(null,boxesh); 
    var index=getminindex(boxesh,minh); 
    boxes[i].style.position='absolute'; 
    boxes[i].style.top=minh+'px'; 
    boxes[i].style.left=index*boxw+'px'; 
    boxesh[index]+=boxes[i].offsetheight+parseint(getstyle(pinw,'paddingleft')); 
   } 
  } 
 } 
 
 function getminindex(arr,val){ 
  for(var i=0;i<arr.length;i++){ 
   if(arr[i]==val) 
    return i; 
  } 
 } 
 
 function checkscrollside(){ 
 var main=document.getelementbyid('main'); 
 var apin=$$('pin',main); 
 console.log(apin.length); 
 var lastpinh=apin[apin.length-1].offsettop+math.floor(apin[apin.length-1].offsetheight/2); 
 var scrolltop=document.documentelement.scrolltop||document.body.scrolltop; 
 var documenth=document.documentelement.clientheight;//页面高度 
 return (lastpinh<scrolltop+documenth)?true:false; 
} 

用jquery实现部分:

//知识点一:jquery事件绑定 
$(window).on('load',function(){ 
 waterfall(); 
 var dataimg={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'},{'src':'5.jpg'},{'src':'6.jpg'},{'src':'7.jpg'},{'src':'8.jpg'},{'src':'9.jpg'}]}; 
 $(window).on('scroll',function(){ 
  if(checkscrollslide()){ 
   //知识点二:数组遍历 
   //知识点三:value参数是dom对象 
   $.each(dataimg.data,function(key,value){ 
    //知识点四:创建dom元素,不需要createelement('div'); 
    //知识点五:为元素绑定class,不再是classname=''; 
    //知识点六:往元素中填充元素,不再是obj.appendchild(obj); 
    //知识点七:属性的获取和设置,可以直接用attr (注意这是针对jquey对象的方法); 
    var obox=$('<div>').addclass('pin').appendto($('#main')); 
    var opic=$('<div>').addclass('box').appendto($(obox)); 
    $('<img>').attr('src','images/'+value.src).appendto($(opic)); 
   }) 
   waterfall(); 
  } 
 }) 
}) 
 
function waterfall(){ 
 var $boxs=$('#main>.pin'); 
 //知识点八:jquery中的outerwidth(false)方法==js中的offsetwidth属性 
 //innerwidth()==clientwidth; 
 //width()==width; 
 var w=$boxs.eq(0).outerwidth(false); 
 //console.log(w); 
 var cols=math.floor($(window).width()/w); 
 //知识点九:jquery可以直接css(),js是obj,style.margin: ect; 
 $('#main').width(cols*w).css('margin','10px auto'); 
 var harr=[]; 
 //注意,这儿value是dom对象 
 $boxs.each(function(index,value){ 
  var h=$boxs.eq(index).outerheight(false); 
  if(index<cols){ 
   harr.push(h); 
  }else{ 
   var minh=math.min.apply(null,harr); 
   //知识点十:jquey中直接封装了一个数组中找取某个值对应下标的方法 
   var minhindex=$.inarray(minh,harr); 
   $(value).css({ 
    'position':'absolute', 
    'top':minh+'px', 
    'left':minhindex*w+'px', 
   }); 
   harr[minhindex]+=$boxs.eq(index).outerheight(false); 
  } 
 }) 
 //console.log(harr); 
} 
 
function checkscrollslide(){ 
 //知识点十一:可以直接last()方法获取最后一个元素 
 var $lastbox=$('#main>div').last(); 
 //知识点十二:js中的一系列offsettop等属性,变成了jquey中的offset().top ect; 
 var lastboxdis=$lastbox.offset().top+math.floor($lastbox.outerheight(false)/2); 
 var scrolltop=$(window).scrolltop(); 
 var documenth=$(window).height(); 
 return (lastboxdis<scrolltop+documenth)?true:false; 
} 

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。