首页
所有分类
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 相关文章推荐
判断JS对象是否拥有某种属性的两种方式
Dec 02 Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
Jun 30 Javascript
javascript中传统事件与现代事件
Jun 23 Javascript
JS响应鼠标点击实现两个滑块区间拖动效果
Oct 26 Javascript
JavaScript自学笔记(必看篇)
Jun 23 Javascript
简单模拟node.js中require的加载机制
Oct 27 Javascript
微信公众平台开发教程（四） 实例入门：机器人回复(附源码)
Dec 02 Javascript
BootStrap 实现各种样式的进度条效果
Dec 07 Javascript
利用node.js实现自动生成前端项目组件的方法详解
Jul 12 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
Jun 25 Javascript
JavaScript惰性载入函数实例分析
Mar 27 Javascript
JS实现基本的网页计算器功能示例
Jan 16 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
RestTemplate(1) ip2region(1) HttpClient(1) DeOldify(1) 反射(1) 注解(1) BottomSheetDialog(1) dataBinding(1) Quartz(1) scrapy(1)
You might like
PHP5下$_SERVER变量不再受magic_quotes_gpc保护的弥补方法
2012/10/31 PHP
php用正则表达式匹配URL的简单方法
2013/11/12 PHP
php操作（删除,提取,增加）zip文件方法详解
2015/03/12 PHP
Laravel 5框架学习之向视图传送数据
2015/04/08 PHP
WordPress中设置Post Type自定义文章类型的实例教程
2016/05/10 PHP
thinkphp制作404跳转页的简单实现方法
2016/09/22 PHP
php.ini中date.timezone设置详解
2016/11/20 PHP
通过js脚本复制网页上的一个表格的不错实现方法
2006/12/29 Javascript
stream.js 一个很小、完全独立的Javascript类库
2011/10/28 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
2014/02/27 Javascript
js获取鼠标点击的位置实现思路及代码
2014/05/09 Javascript
js实现简单秒表走动的时钟特效
2020/03/25 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
2015/12/13 Javascript
打造自己的jQuery插件入门教程
2016/09/23 Javascript
Bootstrap源码解读下拉菜单（4）
2016/12/23 Javascript
jquery仿京东侧边栏导航效果
2017/03/02 Javascript
Vue keep-alive实践总结（推荐）
2017/08/31 Javascript
ES6中Class类的静态方法实例小结
2017/10/28 Javascript
微信小程序提取公用函数到util.js及使用方法示例
2019/01/10 Javascript
vue router动态路由设置参数可选问题
2019/08/21 Javascript
JS数组方法slice()用法实例分析
2020/01/18 Javascript
python对数组进行反转的方法
2015/05/20 Python
python Matplotlib画图之调整字体大小的示例
2017/11/20 Python
Python文件操作模拟用户登陆代码实例
2020/06/09 Python
美国棒球装备和用品商店：Baseball Savings
2018/06/09 全球购物
CK巴西官方网站：Calvin Klein巴西
2019/07/19 全球购物
KELLER SPORTS荷兰：在线订购最好的运动产品
2020/10/13 全球购物
.NET里面什么时候需要调用垃圾回收
2015/06/01 面试题
食堂员工工作职责
2013/12/18 职场文书
家居饰品店创业计划书
2014/01/31 职场文书
七夕活动策划方案
2014/08/16 职场文书
2015年纪念“卢沟桥事变”78周年活动方案
2015/05/06 职场文书
论语读书笔记
2015/06/26 职场文书
幼儿园教师读书笔记
2015/06/29 职场文书
gateway与spring-boot-starter-web冲突问题的解决
2021/07/16 Java/Android
vue整合百度地图显示指定地点信息
2022/04/06 Vue.js