详解照片瀑布流效果(js,jquery分别实现与知识点(2)

//知识点一: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; }

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwjgwg.html