CSS3里的瀑布流效果

页面伸缩之后，内部的布局会自动缩放，高度不同的内容也会自动以垂直瀑布的效果平铺。

下面就是一部分代码：

CSS：

/*大层*/
    .container{width:%;margin:  auto;}
    /*瀑布流层*/
    .waterfall{
        -moz-column-count:; /* Firefox */
        -webkit-column-count:; /* Safari 和 Chrome */
        column-count:;
        -moz-column-gap: 1em;
      -webkit-column-gap: 1em;
      column-gap: 1em;
    }
    /*一个内容层*/
    .item{
      padding: 1em;
      margin:   1em ;
      -moz-page-break-inside: avoid;
      -webkit-column-break-inside: avoid;
      break-inside: avoid;
     border: 1px solid #;
    }
    .item img{
        width: %;
        margin-bottom:10px;
    }

HTML：

<div class="container">
        <div class="waterfall">
            <div class="item">
                <img src="img/111.jpg">
                <p> convallis timestamp</p>
           </div>

            <div class="item">
                <img src="img/222.jpg">
                <p> convallis timestamp  Donec a fermentum nisi. </p>
           </div>

            <div class="item">
                <img src="img/333.jpg">
                <p> Nullam eget lectus augue. Donec eu sem sit amet ligula
        faucibus suscipit. Suspendisse rutrum turpis quis nunc
        convallis quis aliquam mauris suscipit.</p>
           </div>

            <div class="item">
                <img src="img/3344.jpg">
                <p>  Donec a fermentum nisi. Integer dolor est, commodo ut
        sagittis vitae, egestas at augue. </p>
           </div>

              <div class="item">
                <img src="img/555.jpg">
                <p>  Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue.</p>
           </div>
        </div>
    </div>