相思资源网 Design By www.200059.com
看了网上的瀑布流教程，自己跟着写了遍，然后总结了下知识点
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.8.3.min.js">用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 "htmlcode">//知识点一：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; }以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
相思资源网 Design By www.200059.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
相思资源网 Design By www.200059.com
暂无详解照片瀑布流效果（js，jquery分别实现与知识点总结）的评论...