首页
所有分类
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 相关文章推荐
通过JAVASCRIPT读取ASP设定的COOKIE
Nov 24 Javascript
使用javascript获取flash加载的百分比的实现代码
May 25 Javascript
引用外部js乱码问题分析及解决方案
Apr 12 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
bootstrap响应式工具使用详解
Nov 29 Javascript
关于 angularJS的一些用法
Nov 29 Javascript
Express之托管静态文件的方法
Jun 01 Javascript
JavaScript引用类型RegExp基本用法详解
Aug 09 Javascript
vue中的计算属性实例详解
Sep 19 Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
Oct 09 Javascript
微信小程序实现翻牌抽奖动画
Sep 21 Javascript
JavaScript事件的委托(代理)的用法示例详解
Feb 18 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
S2000(3) PL660(1) 根德(2) SRF-S84(1) 森海(1) SRF-S83(1) MX500(1) 台湾(1) 松下(1) 南麂列岛(1)
You might like
php 批量替换程序的具体实现代码
2013/10/04 PHP
laravel5.1框架基础之Blade模板继承简单使用方法分析
2019/09/05 PHP
Laravel如何实现自动加载类
2019/10/14 PHP
面向对象的javascript（笔记）
2009/10/06 Javascript
13个绚丽的Jquery 界面设计网站推荐
2010/09/28 Javascript
jquery插件 autoComboBox 下拉框
2010/12/22 Javascript
jQuery Mobile 导航栏代码
2013/11/01 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
2015/10/04 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
2016/06/03 Javascript
jQuery插件echarts去掉垂直网格线用法示例
2017/03/03 Javascript
vue.js中指令Directives详解
2017/03/20 Javascript
vue时间格式化实例代码
2017/06/13 Javascript
自己动手封装一个React Native多级联动
2018/09/19 Javascript
JS实现的新闻列表自动滚动效果示例
2019/01/30 Javascript
vue下载二进制流图片操作
2020/10/26 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
2021/03/01 jQuery
浅谈Python中的闭包
2015/07/08 Python
Python使用pymongo模块操作MongoDB的方法示例
2018/07/20 Python
Python pymongo模块常用操作分析
2018/09/01 Python
Python实现微信中找回好友、群聊用户撤回的消息功能示例
2019/08/23 Python
xadmin使用formfield_for_dbfield函数过滤下拉表单实例
2020/04/07 Python
在python中使用pyspark读写Hive数据操作
2020/06/06 Python
浅谈如何使用python抓取网页中的动态数据实现
2020/08/17 Python
python实现canny边缘检测
2020/09/14 Python
OpenCV实现机器人对物体进行移动跟随的方法实例
2020/11/09 Python
解决html5中video标签无法播放mp4问题的办法
2017/05/07 HTML / CSS
阿里巴巴的Oracle DBA笔试题答案-SQL tuning类
2016/04/03 面试题
Ajax实现页面无刷新留言效果
2021/03/24 Javascript
中文专业学生自我评价范文
2014/02/06 职场文书
政法学院毕业生求职信
2014/02/28 职场文书
《路旁的橡树》教学反思
2014/04/07 职场文书
个人租房协议书
2014/04/09 职场文书
我爱我家教学反思
2014/05/01 职场文书
政协工作总结2015
2015/05/20 职场文书
用Python爬取某乎手机APP数据
2021/06/15 Python
Java死锁的排查
2022/05/11 Java/Android