首页
所有分类
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通过地址栏给action传值(中文乱码全是问号)
May 02 Javascript
使用js显示当前时间示例
Mar 02 Javascript
JQuery选择器绑定事件及修改内容的方法
Jan 23 Javascript
jQuery实现表格颜色交替显示的方法
Mar 09 Javascript
javascript中对Date类型的常用操作小结
May 19 Javascript
强大Vue.js组件浅析
Sep 12 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
Nov 05 Javascript
jquery实现焦点轮播效果
Feb 23 Javascript
Vue实现动态显示textarea剩余字数
May 22 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
Aug 02 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
Mar 06 Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
Oct 27 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) 人人对战(1) OVERLORD(1) Vscode(3) 2022年7月新番(1) mysql(6) 时钟(1) 算法(1) 双人对弈(1) SSH(3)
You might like
PHP 存储文本换行实现方法
2010/01/05 PHP
mysqli_set_charset和SET NAMES使用抉择及优劣分析
2013/01/13 PHP
PHP登陆后跳转到登陆前页面实现思路及代码
2014/01/17 PHP
php阻止页面后退的方法分享
2014/02/17 PHP
一组PHP加密解密函数分享
2014/06/05 PHP
php实现无限级分类
2014/12/24 PHP
PHP实现适用于文件内容操作的分页类
2016/06/15 PHP
php多进程中的阻塞与非阻塞操作实例分析
2020/03/04 PHP
jquery查找tr td 示例模拟
2014/05/08 Javascript
用js一次改变多个input的readonly属性值的方法
2014/06/11 Javascript
DOM基础教程之使用DOM + Css
2015/01/20 Javascript
javascript中的正则表达式使用指南
2015/03/01 Javascript
浅析node连接数据库（express+mysql）
2015/11/30 Javascript
jQuery的each循环用法简单示例
2016/06/12 Javascript
微信小程序 wxapp地图 map详解
2016/10/31 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
2017/02/08 Javascript
Vue非父子组件通信详解
2017/06/12 Javascript
jQuery实现仿京东防抖动菜单效果示例
2018/07/06 jQuery
ionic4+angular7+cordova上传图片功能的实例代码
2019/06/19 Javascript
Vue通过for循环随机生成不同的颜色或随机数的实例
2019/11/09 Javascript
es6函数之rest参数用法实例分析
2020/04/18 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
2021/01/22 Vue.js
Python 文件重命名工具代码
2009/07/26 Python
Flask的图形化管理界面搭建框架Flask-Admin的使用教程
2016/06/13 Python
Python AES加密模块用法分析
2017/05/22 Python
python生成不重复随机数和对list乱序的解决方法
2018/04/09 Python
pandas 实现字典转换成DataFrame的方法
2018/07/04 Python
Python小白不正确的使用类变量实例
2020/05/29 Python
Python迭代器协议及for循环工作机制详解
2020/07/14 Python
会计出纳岗位职责
2013/12/25 职场文书
迟到检讨书1000字
2014/01/15 职场文书
秋季运动会稿件
2014/01/30 职场文书
维护民族团结演讲稿
2014/08/27 职场文书
小学教师年度个人总结
2015/02/05 职场文书
漂亮妈妈观后感
2015/06/08 职场文书
公开致歉信
2019/06/24 职场文书