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

时间：2019-01-06分类：jQuery作者：编程之家

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

rush:xhtml;">

Box">

用js实现部分：

rush: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=colsBoxw+'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实现部分：

rush:js;"> //知识点一：jquery事件绑定 $(window).on('load',function(){ waterfall(); var dataimg={'data':[{'src':'1.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=$('

').addClass('pin').appendTo($('#main')); var oPic=$('

').addClass('Box').appendTo($(oBox)); $('').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(colsw).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':minHIndexw+'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 lastBox dis=$lastBox.offset().top+Math.floor($lastBox.outerHeight(false)/2);
var scrollTop=$(window).scrollTop();
var documentH=$(window).height();
return (lastBox dis<scrollTop+documentH)?true:false;
}