首页 > 代码库 > js瀑布流布局

js瀑布流布局

     绝大多数的网页都是分为几列进行排版(几个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瀑布流布局