CSS3里的瀑布流效果

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

下面就是一部分代码：

CSS：

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

HTML：

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

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

            <div class="item">
                <img src="img/333.jpg">
                <p>3 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> 4 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> 5 Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue.</p>
           </div>
        </div>
    </div>