jquery与js的区别_js，jquery分别实现照片瀑布流效果与知识点总结

时间：2020-12-20 来源：jquery 阅读：

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

代码如下

<scripttype="text/javascript"src="jquery-1.8.3.min.js"/></script> <scripttype="text/javascript"src="script2.js"/></script> *{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; }

用js实现部分：

代码如下 window.onload=function(){ waterfall("main","box"); vardataimg={"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()) { varmain= document.getElementById("main"); for(vari=0;i用jQuery实现部分：

代码如下 //知识点一：jquery事件绑定 $(window).on("load",function(){ waterfall(); vardataimg={"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对象的方法)； varoBox=$("").addClass("pin").appendTo($("#main")); varoPic=$("").addClass("box").appendTo($(oBox)); $("").attr("src","images/"+value.src).appendTo($(oPic)); }) waterfall(); } }) }) functionwaterfall(){ var$boxs=$("#main>.pin"); //知识点八：jquery中的outerWidth(false)方法==js中的offsetWidth属性 //innerWidth()==clientWidth; //width()==width; varw=$boxs.eq(0).outerWidth(false); //console.log(w); varcols=Math.floor($(window).width()/w); //知识点九：jquery可以直接css(),js是obj,style.margin: ect; $("#main").width(cols*w).css("margin","10px auto"); varhArr=[]; //注意，这儿value是DOM对象 $boxs.each(function(index,value){ varh=$boxs.eq(index).outerHeight(false); if(indexdiv").last(); //知识点十二：js中的一系列offsetTop等属性，变成了jquey中的offset().top ect; varlastBoxDis=$lastBox.offset().top+Math.floor($lastBox.outerHeight(false)/2); varscrollTop=$(window).scrollTop(); vardocumentH=$(window).height(); return(lastBoxDis

jquery与js的区别_js，jquery分别实现照片瀑布流效果与知识点总结

http://m.bbyears.com/wangyezhizuo/117587.html

推荐访问:js和jquery的区别 js和jquery

上一篇：[详解jquery正则表达式的使用方法]详解jQuery正则表达式的使用方法

下一篇：【jquery如何设置和获取selectcheckboxradio选中事件】jQuery如何设置和获取select、checkbox、radio选中值的教程