首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onJanuary 01, 2017

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

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

 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

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

- Author -

normol

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
ExtJS 2.0 GridPanel基本表格简明教程
May 25 Javascript
需要做特殊处理的DOM元素属性的访问
Nov 05 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
Mar 19 Javascript
js操纵跨frame的三级联动select下拉选项实例介绍
May 19 Javascript
javascript实现按回车键切换焦点
Feb 09 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
Mar 02 Javascript
jQuery下拉友情链接美化效果代码分享
Aug 26 Javascript
微信小程序之网络请求简单封装实例详解
Jun 28 Javascript
ES6知识点整理之模块化的应用详解
Apr 15 Javascript
vue h5移动端禁止缩放代码
Oct 28 Javascript
JS实现基本的网页计算器功能示例
Jan 16 Javascript
微信小程序实现身份证取景框拍摄
Sep 09 Javascript
JavaScript cookie详解及简单实例应用
Dec 31 #Javascript
深入理解Angularjs向指令传递数据双向绑定机制
Dec 31 #Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
Dec 31 #Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
Dec 31 #Javascript
angularjs中ng-attr的用法详解
Dec 31 #Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
Dec 31 #Javascript
Angular JS数据的双向绑定详解及实例
Dec 31 #Javascript
相对路径 (1) exists(2) openpyxl(1) Mint UI(1) 相对路径(1) 面向对象(3) 慢日志(1) mt-swipe(1) hmac(1) requests(1)
You might like
深入HTTP响应状态码速查表的详解
2013/06/07 PHP
php加密算法之实现可逆加密算法和解密分享
2014/01/21 PHP
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
2008/03/22 Javascript
DOM 中的事件处理介绍
2012/01/18 Javascript
再谈querySelector和querySelectorAll的区别与联系
2012/04/20 Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
2013/04/12 Javascript
jQuery简单实现banner图片切换
2014/01/02 Javascript
jQuery CSS()方法改变现有的CSS样式表
2014/09/09 Javascript
jQuery实现左右切换焦点图
2015/04/03 Javascript
JavaScript DOM进阶方法
2015/04/13 Javascript
跟我学习javascript的异步脚本加载
2015/11/20 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
2016/03/08 Javascript
JavaScript学习笔记之取数组中最大值和最小值
2016/03/23 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
2016/05/19 Javascript
javascript加减乘除的简单实例
2016/07/12 Javascript
9个让JavaScript调试更简单的Console命令
2016/11/14 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
2018/07/26 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
2018/11/13 Javascript
vue路由--网站导航功能详解
2019/03/29 Javascript
微信小程序分享小程序码的生成（带参数）以及参数的获取
2020/03/25 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
2020/06/01 Javascript
Windows下Python的Django框架环境部署及应用编写入门
2016/03/10 Python
Django框架教程之正则表达式URL误区详解
2018/01/28 Python
Python unittest单元测试框架总结
2018/09/08 Python
Python功能点实现:函数级/代码块级计时器
2019/01/02 Python
python实现简单聊天室功能 可以私聊
2019/07/12 Python
pytorch 准备、训练和测试自己的图片数据的方法
2020/01/10 Python
Python中格式化字符串的四种实现
2020/05/26 Python
浅谈opencv自动光学检测、目标分割和检测(连通区域和findContours)
2020/06/04 Python
Django多数据库联用实现方法解析
2020/11/12 Python
印尼披萨外送专家：Domino’s Pizza印尼
2017/12/28 全球购物
销售口号大全
2014/06/11 职场文书
综合素质自我评价怎么写
2014/09/14 职场文书
医院护士见习期自我鉴定
2014/09/15 职场文书
python中的被动信息搜集
2021/04/29 Python
“鬼灭之刃”热度不减，其成功背后的原因是什么？
2022/03/22 日漫