js瀑布流布局

标签：style   io   ar   for   sp   div   on   问题   cti   

     绝大多数的网页都是分为几列进行排版（几个div），传统布局就是将内容模块直接写在这几个div中。但是这种布局存在一个问题，那就是如果这个页面的信息非常的庞大，内容很多时这几列div会非常的长。而浏览器是逐行加载的，上述情况下会出现页面一直在加载第一列的内容，半天加载不完，而另外的几列什么都不显示。

用户是横向观看网页的，而上述情况下网页却是在逐列的纵向加载，这使得用户体验极差。为解决这种情况，就需要瀑布流布局。在几列中进行横向加载。

代码如下：

function fnRand(min,max){
　　return parseInt(Math.random()*(max-min)+min);
}
window.onload=function (){

　　var oWrap=document.getElementById("wrap");
　　var aUl=oWrap.children;

　　function createLi(){
　　　　var oLi=document.createElement("li");
　　　　oLi.style.height=fnRand(100,300)+"px";

　　　　var ul1=aUl[0].offsetHeight;
　　　　var ul2=aUl[1].offsetHeight;
　　　　var ul3=aUl[2].offsetHeight;

　　　　var min=Math.min(ul1,ul2,ul3);                   //找到几列中高度最矮的 高度值

　　　　for (var j = 0; j < aUl.length; j++) {
　　　　　　if (min==aUl[j].offsetHeight){               //通过高度值来找出最矮的列
　　　　　　　　min=aUl[j];
　　　　　　}
　　　　}
　　　　min.appendChild(oLi);                        //将新的内容放入最矮的列
　　}

　　for (var i = 0; i < 20; i++) {
　　　　createLi();
　　}
　　window.onscroll=function (){

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

　　　　var max=oWrap.offsetHeight-document.documentElement.clientHeight;

　　　　if (bodyScrollTop==max){
　　　　　　alert("到底了");
　　　　　　for (var i = 0; i < 20; i++) {        //到底了再继续加载
　　　　　　　　createLi();
　　　　　　}
　　　　}
　　}
}

js瀑布流布局

标签：style   io   ar   for   sp   div   on   问题   cti   

原文地址：http://www.cnblogs.com/xipeiyang/p/4048596.html