JavaScript实现自适应宽度的瀑布流

这样的布局并不陌生，从2011年Pinterest创立以来，中国互联网就迅速掀起了一股模仿Pinterest的热潮，国内有众多网站采用瀑布流的布局方式，例如花瓣网、美丽说等等。而事实上在中国互联网，模仿一些在国外被人看好的模式（当然，你也可以说是山寨或抄袭，呵呵！！）向来都是一个不错的idea。

　　OK，现在进入正题。这里主要介绍瀑布流的一种实现方法：绝对定位(css)+javascript+ajax+json。简单一点如果不做滚动加载的话就是绝对定位(css)+javascript了，ajax和json是滚动加载更多内容的时候用到的。

　　下面是实现思路：

　　1、计算页面的宽度，计算出页面可放数据块的列数（如上图所示就有6列）。

　　2、将各个数据块的高度尺寸记入数组中（需要等所有图片加载完成，否则无法知道图片的高度）。

　　3、用绝对定位先将页面第一行填满，因为第一行的top位置都是一样的，然后用数组记录每一列的总高度。

　　4、继续用绝对定位将其他数据块定位在最短的一列的位置之后然后更新该列的高度。

　　5、当浏览器窗口大小改变时，重新执行一次上面1-4步以重新排放（列数随页面宽度而改变，因而需要重新排放）。

　　6、滚动条滚动到底部时加载新的数据进来后也是定位在最短的一列的位置之后然后更新该列的高度。

　　思路有了，然后就是如何用代码实现。当然，如果看完以上的6个步骤你已经知道如何实现，那么下面的内容大可不必细看。

　　首先在页面上写好基本的HTML和CSS（为方便起见，CSS就不外联了），代码如下：

1DOCTYPE html>
    2345瀑布流布局title>
    67body{
    margin:0;
    font-family:微软雅黑;
    }
    8#flow-box{
    margin:10px auto 0 auto;
    padding:0;
    position:relative}
    9#flow-box li{
    10width:190px;
    position:absolute;
    padding:10px;
    border:solid 1px #efefef;
    list-style:none;
    11opacity:0;
    12-moz-opacity:0;
    13filter:alpha(opacity=0);
    14-webkit-transition:opacity 500ms ease-in-out;
    15-moz-transition:opacity 500ms ease-in-out;
    16-o-transition:opaicty 500ms ease-in-out;
    17transition:opaicty 500ms ease-in-out;
    }
    18#flow-box li img{
    width:100%;
    }
    19#flow-box li a{
    display:block;
    width:100%;
    text-align:center;
    font-size:14px;
    color:#333;
    line-height:18px;
    margin-top:10px;
    text-decoration:none;
    }
    20.loadwrap{
    position:absolute;
    left:0;
    width:100%;
    text-align:center;
    }
    21style>
    22head>
    232425图片标题1a>
    li>
    26图片标题2a>
    li>
    27图片标题3a>
    li>
    28图片标题4a>
    li>
    29图片标题5a>
    li>
    30图片标题6a>
    li>
    31图片标题7a>
    li>
    32图片标题8a>
    li>
    33图片标题9a>
    li>
    34图片标题10a>
    li>
    35图片标题11a>
    li>
    36图片标题12a>
    li>
    37图片标题13a>
    li>
    38图片标题14a>
    li>
    39图片标题15a>
    li>
    40图片标题16a>
    li>
    41图片标题17a>
    li>
    42图片标题18a>
    li>
    43图片标题19a>
    li>
    44图片标题20a>
    li>
    45ul>
    46div>
    47body>
    48html>
    

　　以上代码非常简单，可以看出页面最初将会先加载20个数据块。值得一提的是在CSS里面定义了opacity为 0，目的是在数据块未排放好之前先隐藏起来，排放好后再将opacity设为1显示出来，另外这里用了css3的transition做一点体验上的升 级；还有一点就是可以看到页面底部有一个id为"loading"的DIV，用来表示数据正在加载中。下面开始用JS实现以上思路（6个步骤）。

　　1、计算页面的宽度，计算出页面可放数据块的列数

12functionflow(mh, mv) {
    //参数mh和mv是定义数据块之间的间距，mh是水平距离，mv是垂直距离3varw=document.documentElement.offsetWidth;
    //计算页面宽度4varul=document.getElementById("flow-box");
    5varli=ul.getElementsByTagName("li");
    6variw=li[0].offsetWidth+mh;
    //计算数据块的宽度7varc=Math.floor(w/iw);
    //计算列数8ul.style.width=iw*c-mh+"px";
    //设置ul的宽度至适合便可以利用css定义的margin把所有内容居中
9}
    10script>
    

　　注释写得非常明白，这一步不说应该都很容易懂。

　　2、将各个数据块的高度尺寸记入数组中

12functionflow(mh, mv) {
    //参数mh和mv是定义数据块之间的间距，mh是水平距离，mv是垂直距离3//... 省略上一步的部份代码 ...8ul.style.width=iw*c-mh+"px";
    //设置ul的宽度至适合便可以利用css定义的margin把所有内容居中910varliLen=li.length;
    11varlenArr=[];
    12for(vari=0;
     i

　　由于数据块里面含有图片，也没有给定图片的尺寸，所以需要等待图片加载完成后方可获取其高度；那么可以在window.onload的时候调用flow方法。代码变成：

12functionflow(mh, mv) {
    //参数mh和mv是定义数据块之间的间距，mh是水平距离，mv是垂直距离3//... 省略上一步的部份代码 ...8ul.style.width=iw*c-mh+"px";
    //设置ul的宽度至适合便可以利用css定义的margin把所有内容居中910varliLen=li.length;
    11varlenArr=[];
    12for(vari=0;
     i

　　3、用绝对定位先将页面第一行填满，因为第一行的top位置都是一样的，然后用数组记录每一列的总高度。

12functionflow(mh, mv) {
    //参数mh和mv是定义数据块之间的间距，mh是水平距离，mv是垂直距离　　　　　　　　　　 //... 省略上一步的部份代码 ...
12for(vari=0;
     ia) {
    34a=arr[k];
    35}
    36}
    37returna;
    38}
    39script>
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！