启闭机厂家
免费服务热线

Free service

hotline

010-00000000
启闭机厂家
热门搜索:
行业资讯
当前位置:首页 > 行业资讯

绝对定位JS照样实现瀑布流式布局

发布时间:2019-12-18 17:06:45 阅读: 来源:启闭机厂家

一夜之间 仿佛互联网上出现了一种类似瀑布情势的网页布局,如美丽说、蘑菇街等网站都采取这类布局情势。常见的实现方法一般分为:传统多列浮动 、CSS3 定义、绝对定位。 笔者看到网上仅仅有关于CSS的详细教程,未见有绝对定位的相干教程。现在想和各位朋友们分享一下绝对定位的运用及具体代码,希望朋友们能够指出其中的不足之处。

JS的绝对定位分解成三个部份代码,这样清晰,方便查看代码,其中包括: Javascript代码、HTML代码、[AJax封装文件 代码。

[Javascript]代码

scripttype=text/javascriptsrc=script

scripttype=text/javascript

load=function()

{

varoDiv=tElementById(div);

varoUl=tElementsByTagName(ul);

scroll=function()

{

varclientH=ientHeight;

varscrollH=rollTop||rollTop;

for(vari=0;ngth;i++)

{

varaLi=oUl[i].getElementsByTagName(li)

varlastL=aLi[ngth-1];

if(toTop(lastL)clientH+scrollH)

{

ajax(function(str)

{

varjson=eval((+str+))

for(vari=0;ngth;i++)

{

varlist=st[i];

for(varj=0;ngth;j++)

{

varoLi=eateElement(li)

nerHTML=imgsrc=+c[j]+p+tle[j]+/p

oUl[i].appendChild(oLi);

}

}

})

}

}

}

functiontoTop(obj)

{

vartop=0;

while(obj)

{

top+=fsetTop;

obj=fsetParent

}

returntop;

}

}

/script

在html的head中,加入scriptsrc=js/*.jstype=text/javascript/script

注:不能是scriptsrc=js/*.jstype=text/javascript/JS部份处理终了以后,接下来就是HTML代码部份的书写:

[HTML]代码

divid=div

ul

li

imgsrc=images/g

p11111111/p

/li

li

imgsrc=images/g

p11111111/p

/li

li

imgsrc=images/g

p11111111/p

/li

li

imgsrc=images/g

p11111111/p

/li

/ul

ul

li

imgsrc=images/g

p11111111/p

/li

li

imgsrc=images/g

p11111111/p

/li

/ul

/div

[AJax封装文件]代码

functionajax(urlsFnnFn)

{

varoAjax=null;

if(tiveXObject)

{

oAjax=newActiveXObject(LHTTP)

}

else

{

oAjax=newXMLHttpRequest();

}

en(GETurltrue)

nd();

readystatechange=function()

{

if(adyState==4)

{

if(atus==200)

{

if(sFn)

{

sFn(sponseText)

}

}

else

{

if(nFn)

{

nFn(atus)

}

}

}

}

}

固然,通过JS调用做瀑布式布局的方法还有很多,笔者仅列出一种,除JS,jQuery的Masonry插件、KISSY的waterfall插件等都可以更加方便的实现效果。JS+HTML+封装代码已给写出来了,供大家参考。JS虽然老了,但照旧千变万化,希望你能找到最合适自己的方法。

---------本文由郑州网站建设 ://.zzwlgs.在A5首发,转载请注明出处。

设计作品

躺平设计家

户型库

躺平设计家

设计头条

设计家

模型库