从瀑布流布局说起详解编程语言

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

实现

首先在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; 
   }

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