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

时间：2017-01-03 编辑：简简单单来源：一聚教程网

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

代码如下	复制代码
javascript"src="jquery-1.8.3.min.js"/> *{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

{

varpin=document.createElement('div');

pin.className='pin';

main.appendChild(pin);

varbox=document.createElement('div');

box.className='box';

pin.appendChild(box);

varimg=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，会每一次循环都遍历一次

varnodes=(ele||document).getElementsByTagName("*"),

eles=[],

len=nodes.length

currNode,

clsNames,

clsLen;

for(i=0;i

{

currNode=nodes[i];

clsNames=currNode.className.split(' ');

clsLen=clsNames.length;

for(j=0;j

{

if(clsNames[j]==clsName)

{

eles.push(currNode);

break;

}

returneles;

}

//知识点一：js中通过属性offset--等，但padding,margin等只能获取在内联html中有的样式，

//因此，下面这个函数是获取css样式的通用函数。

vargetStyle =function(dom, attr)

{

returndom.currentStyle ? dom.currentStyle[attr] : getComputedStyle(dom,false)[attr];

}

functionwaterfall(parent,box){

varmain=document.getElementById(parent);

varboxes=$$(box,main);

varpins=$$('pin',main);

//console.log(boxes.length);

varpinw=pins[0];

varboxw=boxes[0].offsetWidth+parseInt(getStyle(pinw,'paddingLeft'));

console.log(boxes[0].clientWidth);

//console.log(boxw+','+main.clientWidth+','+main.offsetWidth+','+getStyle(boxes[0],'margin'));

varcols=Math.floor(document.documentElement.clientWidth/boxw);

console.log(cols);

main.style.width=cols*boxw+'px';

varboxesh=[];

for(vari=0;i

if(i

boxesh.push(boxes[i].offsetHeight+parseInt(getStyle(pinw,'paddingBottom')));

}

else{

varminh=Math.min.apply(null,boxesh);

varindex=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'));

}

functiongetMinIndex(arr,val){

for(vari=0;i

if(arr[i]==val)

returni;

}

functioncheckscrollside(){

varmain=document.getElementById('main');

varaPin=$$('pin',main);

console.log(aPin.length);

varlastPinH=aPin[aPin.length-1].offsetTop+Math.floor(aPin[aPin.length-1].offsetHeight/2);

varscrollTop=document.documentElement.scrollTop||document.body.scrollTop;

vardocumentH=document.documentElement.clientHeight;//页面高度

return(lastPinH

}

用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(index

hArr.push(h);

}else{

varminH=Math.min.apply(null,hArr);

//知识点十：jquey中直接封装了一个数组中找取某个值对应下标的方法

varminHIndex=$.inArray(minH,hArr);

$(value).css({

'position':'absolute',

'top':minH+'px',

'left':minHIndex*w+'px',

});

hArr[minHIndex]+=$boxs.eq(index).outerHeight(false);

}

})

//console.log(hArr);

}

functioncheckScrollSlide(){

//知识点十一：可以直接last()方法获取最后一个元素

var$lastBox=$('#main>div').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

}

上一个： Highcharts＋NodeJS搭建数据可视化平台实例代码
下一个： jQuery如何设置和获取select、checkbox、radio选中值的教程

推荐专题

最新下载

热门教程

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

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程