18720358503 在线客服 人才招聘 返回顶部
企业动态 技术分享 行业动态

肯定精准定位:JS照样完成瀑布流式的合理布局

2021-05-07分享 "> 对不起,没有下一图集了!">

肯定精准定位:JS照样完成瀑布流式的合理布局


短视頻,自新闻媒体,达人种草1站服务 1夜之间 好像互联网技术上出現了1类型似瀑布方式的网页页面合理布局,如漂亮说、蘑菇街等网站都选用这类合理布局方式。普遍的完成方式1般分成:传统式两列波动 、CSS3 界定、肯定精准定位。 笔者看到在网上仅唯一有关CSS的详尽实例教程,未见有肯定精准定位的有关实例教程。如今想和各位盆友们共享1下肯定精准定位的运用及实际编码,期待盆友们可以指出在其中的不够的地方。

 

JS的肯定精准定位溶解成3个一部分编码,这样清楚,便捷查询编码,在其中包含: Javascript编码、HTML编码、[AJax封裝文档 编码。

 [Javascript]编码

script type= text/javascript  src= ajax.js /script

script type= text/javascript

window.onload=function()

{

 var oDiv =document.getElementById( div

 var oUl=document.getElementsByTagName( ul

 window.onscroll=function()

 {

 var clientH=document.documentElement.clientHeight;

 var scrollH=document.documentElement.scrollTop||document.body.scrollTop;

 for(var i=0;i oUl.length;i++)

 {

 var aLi=oUl[i].getElementsByTagName( li )

 var lastL=aLi[aLi.length⑴];

 if(toTop(lastL) clientH+scrollH)

 {

 ajax( a.js ,function(str)

 {

 var json = eval( ( +str+ ) )

 for(var i=0;i json.list.length;i++)

 {

 var list=json.list[i];

 for(var j=0;j list.src.length;j++)

 {

 var oLi=document.createElement( li )

 oLi.innerHTML= img src= +list.src[j]+ p +list.title[j]+ /p

 oUl[i].appendChild(oLi);

 }

 }

 })

 }

 }

 }

 

 function toTop(obj)

 {

 var top=0;

 while(obj)

 {

 top +=obj.offsetTop;

 obj=obj.offsetParent 

 }

 return top;

 }

}

/script

 

在html的head中,添加 script src= js/*.js  type= text/javascript /script

注:不可以是 script src= js/*.js  type= text/javascript / JS一部分解决结束以后,接下来便是HTML编码一部分的撰写:

 

 [HTML]编码

 

  div id= div
  ul
  li
  img src= images/1.jpg
  p /p
  /li
  li
  img src= images/2.jpg
  p /p
  /li
  li
  img src= images/3.jpg
  p /p
  /li
  li
  img src= images/4.jpg
  p /p
  /li
  /ul
  ul
  li
  img src= images/5.jpg
  p /p
  /li
  li
  img src= images/6.jpg
  p /p
  /li
  /ul
  /div  

 

 [AJax封裝文档 ]编码

function ajax(url,sFn,nFn)
{
 var oAjax=null;
 if(window.ActiveXObject)
 {
 oAjax=new ActiveXObject( Microsoft.XMLHTTP )
 }
 else
 {
 oAjax=new XMLHttpRequest();
 }
 oAjax.open( GET ,url,true)
 oAjax.send();
 oAjax.onreadystatechange=function()
 {
 if(oAjax.readyState==4)
 {
 if(oAjax.status==200)
 {
 if(sFn)
 {
 sFn(oAjax.responseText)
 }
 }
 else
 {
 if(nFn)
 {
 nFn(oAjax.status)
 }
 }
 }
 }

    自然,根据JS启用做瀑布式合理布局的方式也有许多,笔者仅列出1种,除JS,jQuery的Masonry软件、KISSY的waterfall软件等都可以以更为便捷的完成实际效果。JS+HTML+封裝编码早已给写出来了,供大伙儿参照。JS尽管老了,但依然千姿百态,期待你能寻找最合适自身的方式。

---------本文由郑州企业网站建设 在A5首发,转载请注明出处。


"> 对不起,没有下一图集了!">
在线咨询