详解照片瀑布流效果（js，jquery分别实现与知识点总结）

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

 
 
 
 
 
 
 
 
 *{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; 
 } 
 
 
 
 
  
   
    
   
  
  
   
    
   
  
  
   
    
   
  
  
   
    
   
  
  
   
    
   
  
  
   
    
   
  
  
   
    
   
  
  
   
    
   
  
  
   
    
   
  
  
   
    
   
  
  
   
    
   
  
  
   
    
   
  
  
   
    
   
  
  
   
    
   
  
  
   
    
   
  
  
   
    
   
  
  
   
    
   
  
  
   
    
   
  
  
   
    
   
  
  
   
    
   
  
  
   
    
   
  
 
 
 

用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用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=$('').addClass('pin').appendTo($('#main')); 
    var oPic=$('').addClass('box').appendTo($(oBox)); 
    $('').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(indexdiv').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

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