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

natineprince 2017-01-01

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

<!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; 
}
natineprince

natineprince

相关推荐

基于S3C2440嵌入式Linux系统下的一个DS18B20驱动和命令行测试程

在此之前曾经在8051下写了一个DS18B20的简单驱动，大家可以查阅我之前的日记，比较两者的差异。学习嵌入式样Linux也有一段时间了，决定用Linux驱动编程的方法写一个DS18B20的温度传感器驱动，从底层采集温度信息。以下乃本人所写的驱动和测试的源

baskMMU / 0评论 2010-09-05

Ubuntu 10.04下的php5.3降级到php5.2

因为Ubuntu 10.04下Zend Optimizer 3.3.9都还没有开始支持php5.3，所以把ubuntu10.4的php5.3降级到php5.2步骤:. Package: php5-dbgPin: version 5.2.10*Pin-Pri

xiaolengpj / 0评论 2010-12-04

Win10添加PIN密码登录的教程

PIN密码也就是个人识别密码。在Win10系统中，我们可以设置PIN密码登录，只要我们输入正确的密码，不用回车，即可快速登录系统，那么Win10怎么添加PIN密码登录呢？

Moabi / 0评论 2017-02-22

win10系统中指纹及pin码不能使用该怎么办?

域用户将原有的指纹和pin码删除后无法再次添加指纹和pin码。win10系统中怎么设置指纹登陆？Win10系统中PIN码登录无法正常使用该怎么办?

82296535 / 0评论 2017-02-08

Win10如何创建PIN码？Win10创建PIN码的方法

PIN就是个人识别码，也是密码的一种，Win10系统中也可以设置PIN码来代替用户密码，那么如何创建PIN码？下面小编就给大家带来Win10创建PIN码的方法，一起来看看吧。　　1、首先按Win+i打开设置界面，在设置界面中点击“账户”选项。　　3、在右侧

82206833 / 0评论 2017-01-22

Win10如何删除pin码？Win10删除pin码的方法

Windwos10开机登录pin码如何删除呢？自从大家升到win10后，肯定需要注册账号登陆win10，注册时要设置PIN码或者密码，于是开机就要输入PIN码或密码，这成为一些电脑党的烦恼。下面小编教大家在Win10正式版中删除pin码的方法，一起来看看吧

85296630 / 0评论 2016-08-29

Win10系统中PIN码登录无法正常使用该怎么办?

PIN密码是从Win8开始Windows中新增加的一种登录认证方式，也是微软极力推荐的一种登录方式。在Win10的安装过程中，微软会提示用户传统密码已经过时，推荐采用更简单但却更安全的PIN码登录。如果你的设备支持Windows Hello，要使用这些功能

kktode / 0评论 2016-01-13

Win10系统在脱机状态下不能使用pin码登陆的详细解决方法

由于pin码只有四位数字，更加方便易记，所以大多windows10用户都会使用pin码来登录系统。不过在实际使用中，设置pin码后未能及时联网激活，常常会导致Win10系统在脱机状态下无法使用pin码登陆。

80206133 / 0评论 2015-11-23

win10怎么取消pin登录？win10系统不用pin密码登录方法图解

　　初次使用win10系统时需要注册win10登录帐号，注册时要设置PIN码或者密码，于是开机就要输入PIN码或密码，这成为一些电脑党的烦恼，那么，win10系统开机怎么不用输PIN码或密码呢？对于此问题，本文主要为大家图文介绍设置让win10系统不用pi

82206833 / 0评论 2015-09-09

Win10新设置的PIN码不能登录或删除和修改等操作

　　Win10系统在使用过程中会出现一种情况，新设置的PIN码不能登录系统，不能登录就算了，甚至还不能对Win10 PIN码进行删除和修改的操作，这个时候该怎么办呢？PIN全称Personal Identification Number，是四位数字码。由于

83266337 / 0评论 2015-06-23

如何在win10系统中更改微软账户pin码？win10设置PIN码教程

　　也许之前，在windows系统中，咱们想要登陆系统，只能通过输入密码的方式来进行操作，但是随着windows系统的升级，随着系统越来越智能化，咱们登陆系统的方式也变得多了起来，这不，咱们升级到win10系统之后，除了传统的密码登陆方式之外，就又新追加了

做你的老王 / 0评论 2015-06-21

tornado做树莓派车的遥控器

最近在做ios的一个东西，后端用的websocket. 今天把树莓派的小车又翻出来了。使用tornode做了个遥控器，python的websocket和python的gpio，天生的好基友啊。2016年2月15日变为

wangdamingll / 0评论 2014-12-03

把各种对象(锁定)Pin到windows7系统任务栏中的方法

Windows7的超级任务栏可以锁定各种程序启动文件以及IE9的网页，让我们的日常操作更加简便，但想必还有更多人和小编一样，希望能把更多的东西锁到任务栏上，比如文件、文件夹之类的。只不过Windows 7不支持直接将这些对象锁定到任务栏，需要绕个弯来间接实

cunxinwenwu的IT / 0评论 2013-07-13

基于PWM调宽的呼吸灯算法

本文提供基于Texas Instruments 公司开发的Tiva C Series的系统板 ––—- TM4C123GH6PM ，以及DY - Tiva - PB v3.0 的拓展板实现呼吸灯算法。核心思路是通过循环调整亮灭的时间，总时间一定，使灭的时间

standfly / 0评论 2019-07-01

基于PWM调宽的呼吸灯算法

本文提供基于Texas Instruments 公司开发的Tiva C Series的系统板 ––—- TM4C123GH6PM ，以及DY - Tiva - PB v3.0 的拓展板实现呼吸灯算法。核心思路是通过循环调整亮灭的时间，总时间一定，使灭的时间

WindChaser / 0评论 2019-07-01

Ubuntu16.04 中 OpenJDK-7、Apache-Ant 的安装配置

创建一个 pinning 文件，让 Linux 管理工具 apt 只需考虑对我们有用的 package.sudo apt install debian-archive-keyring注意：这种添加 Debian keyring 的方法是最简单的，但它可能不

本本牛 / 0评论 2019-06-27

Ubuntu 10.04 Lucid 上安裝 php 5.2

Ubuntu 10.04 上 php 版本是 5.3 不能用 zend Optimizer 只能改用 5.2 了

pupur / 0评论 2010-06-10

基于S3C2440嵌入式Linux系统下DS18B20驱动源码

用Linux驱动编程的方法写一个DS18B20的温度传感器驱动，从底层采集温度信息。以下乃本人所写的驱动和测试的源码，嵌入式Linux内核版本为2.6.29，硬件平台是友善之臂的QQ2440，DS18B20引脚连接S3C2440的GPIOB1，程序难免存在

二哈 / 0评论 2009-06-17

Win10开启PIN码使用教程

很多电脑爱好者对于Win10内置的PIN码功能不太了解，很多朋友都还没有使用。其实，创建PIN码可以提到密码使用，当你登录到Windows和其它应用服务时，可以通过PIN码替代输入账户密码，提升安全性。话不多说，以下是Win10开启PIN码设置使用教程，步

BAT 批处理程序 / 0评论 2017-06-26

Oracle Buffer Pool内部闩锁机制

本文中根块，枝块，叶块，表块分别是索引根块，索引枝块，索引叶块，数据表块的简称。此外本文大多数观点来自于大师吕海波《Oracle内核技术揭秘》一书，本博文为个人感想。我们知道在数据库中无论是读取还是修改一个块都是极其迅速的，因此即便是以上的并发情况下，由于

网络游戏 / 0评论 2017-06-17

STM32C8T6 JTAG使用到PB3|PB4|PA13|PA14|PB15端口做普通IO时，需禁止JTAG！

GPIO_InitTypeDef GPIO_InitStructure;RCC_APB2PeriphClockCmd(RCC_APB2Periph_GPIOB|RCC_APB2Periph_GPIOC|RCC_APB2Periph_AFIO, ENAB

手机操作系统 / 0评论 2016-09-28