Absolute positioning: JS achieves waterfall stream Layout

Overnight, it seems that there is a waterfall-like web page layout on the Internet, such as the beautiful saying, mogujie.com and other websites all adopt this layout. Common Implementation methods include: traditional multi-column floating, CSS3 definition, and absolute positioning. I can see that there are only detailed tutorials on CSS on the Internet, and no tutorials on absolute positioning are found. I would like to share with you some of my friends the definitely positioned applications and specific code. I hope my friends can point out the shortcomings.

　　

 

The absolute positioning of JS is divided into three parts of code, which is clear and easy to view, including Javascript code, HTML code, and [AJax encapsulated file code.

[Javascript] Code

<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 clienthpolicdocument.doc umentElement. clientHeight;

Var scrollhsf-document.doc umentElement. scrollTop | document. body. scrollTop;

For (var I = 0; I <oUl. length; I ++)

{

Var aLi = oUl [I]. getElementsByTagName ("li ")

Var lastL = aLi [aLi. length-1];

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 = ' <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>

 

Add <script src = "js/*. js" type = "text/javascript"> </script> to the html head.

Note: it cannot be <script src = "js/*. js" type = "text/javascript"/> after processing part of javascript, the following section describes how to write the HTML code:

 

[HTML] Code

 

<Div id = 'div '>
<Ul>
<Li>

<P> 11111111 </p>
</Li>
<Li>

<P> 11111111 </p>
</Li>
<Li>

<P> 11111111 </p>
</Li>
<Li>

<P> 11111111 </p>
</Li>
</Ul>
<Ul>
<Li>

<P> 11111111 </p>
</Li>
<Li>

<P> 11111111 </p>
</Li>
</Ul>
</Div>

 

[AJax encapsulation file] Code

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)
}
}
}
}
}

Of course, there are many other methods to implement waterfall layout through JS calls. I only list one method. Besides JS, jQuery's Masonry plug-in and KISSY's waterfall plug-in can be more convenient. JS + HTML + encapsulation code has been written for your reference. Although Javascript is old, it is still changing. I hope you can find the most suitable method.

--------- This article by Zhengzhou Website Construction Co., http://www.zzwlgs.com.