瀑布流布局

瀑布流布局适合于小数据块，每个数据块内容相近且地位平等。随着滚动条向下滚动，瀑布流布局还会不断加载数据块并无限附加到页面尾部。

实现

首先在body中创建好模板

    <div id="box">
        <ul></ul>
        <ul></ul>
        <ul></ul>
        <ul></ul>
    </div>

设置写简单的样式，让每个图片之间有点间隙，让照片更有视觉冲击力，比较有美感。

    * {
        padding: 0;
        margin: 0;
    }
    #box {
        width: 90%;
        margin: 20px auto;
    }
    #box ul {
        list-style: none;
        float: left;
        width: 24%;
        margin: 5px;
    }
    #box ul img {
        width: 100%;
        margin: 5px;
    }

接下来利用js创建图片和li

    function createImg (count) {
         //循环创建
        for(var i = 0; i < count; i++) {
            //创建图片 和 li
            var img = document.createElement("img");
            img.src = "image/" + i + ".jpg";
            var li = document.createElement("li");
            li.appendChild(img);
         }
    }

这时候就要想想怎么把图片添加到ul，因为这时候图片大小不一样，如果你依次循环添加到ul中，有可能出现长的图片都在一列，短的都在一列，可能会使中间出现一个大的缺口，那么就会很缺少美感。

    //获取到所有的ul
    var ulArr = document.getElementsByclassName("ul");
    //假设一个最短的ul
    var minHeightUl = ulArr[0];
    //每次添加图片之前循环找到每次最短的ul添加
    for (var j = 0; j < ulArr.length; j++) {
        if (minHeightUl.offsetHeight > ulArr[j].offsetHeight) {
            minHeightUl = ulArr[j];
        }
    }
    minHeightUl.appendChild(li);

lazyLoad

如果想实现lazyLoad只需要把上面的src指向改为data-src，在滚动条移动到相应位置再把图片的data-src替换成src，可以参考另一篇博文 lazyLoad与节流

多列等高布局

比如说一个三列布局，我们设置每一列的宽度为33.3%，并左浮动形成三列效果。但是三列布局中每一列的文字内容长度不同，导致各列的高度也不相同。那么我们如何为这些列设置一样的高度呢，一种解决方案是为每一列设定一个固定的高度值，但是实际开发中，每一列的内容都可能会随着数据的不同而动态变化。既然无法得到一个精确的高度值，我们可以换一种思路，由于每一列之间的高度差别较小，我们可以使用一个较大的内边距，这个内边距超过了我们预估的列间高度的最大差异值，以使得每一列都增加相应的高度

   .col {
      padding-bottom: 500px;
   }

现在每一列的高度都增加了500像素，为了抵消这个高度，我们可以运用负值margin的威力

   .col {
      padding-bottom: 500px;
      margin-bottom: -500px;
   }

最后，我们将container设置overflow: hidden，将超出实际内容高度隐藏掉，这样就实现了多列等高的效果。

两列自适应布局

我们再来看另一种经典布局方式——两列自适应布局，也就是一列宽度固定，而另一列宽度自适应。经典的亚马逊网站就适应了这一布局方式，在某个宽度范围内缩放浏览器窗口时，一侧的图片列表宽度不变，左侧的主内容区域宽度随浏览器宽度发生变化。

   <div class="container">
      <div class="side">
      <div class="main">
   </div>

图片列表的宽度固定，绝对定位在row的左边。row使用padding将main顶到右边，这时main可以设置width: 100% 实现自适应。

   .container {
      position: relative;
      width: 100%;
      box-sizing: border-box;
      padding-left: 300px;
   }
   .side {
       position: absolute;
       left: 0;
       width: 300px;
       height: 500px;
   }
   .main {
       width: 100%;
       height: 500px;
   }

三列自适应布局

三列自适应布局更复杂一些，它要求左右两列宽度固定，中间一列宽度自适应。

   <div class="container">
      <div class="main">
      <div class="left">
      <div class="right">
   </div>

我们先设置基本的宽度(3列都是向左浮动，这里省略)

   .left {
      width: 350px;
   }
   .right {
      width: 250px;
   }
   .main {
      width: 100%;
   }

这时，左侧和右侧列都被挤出，显示在了中间列的下方。我们给左边的一列设置

   .left {
       margin-left: -100%;
   }

这里的100%指的是父元素的宽度，所以left列来到了最左边。右侧的定位也可以通过负margin来实现。

   .right {
       margin-right: -250px;
   }

然后给container设定padding留出right列的位置

   .container {
       padding-left: 350px;
       padding-right: 250px;
   }

现在位置唯一不正确的就是left列，因为它的margin-left 已经被设置，所以我们需要思考其他的方法，可以使用相对定位

   .left {
       position: relative;
       right: 350px;
   }

最后，为了防止布局被挤破，我们可以在body中规定一个最小的宽度尺寸，如果小于该窗口，窗口浏览器将出现横向滚动条，而非继续压缩

   body {
      min-width: 950px;
   }

以上的布局又被称为圣杯布局，还有一种双飞翼布局可以实现相同的效果。