纯CSS实现瀑布流布局（代码教程）

首先一个页面的布局

<p id="container-pro">  
    <p class="waterfall">  
       <p class="item"><img src="img/1.jpg"></p>  
       <p class="item"><img src="img/2.jpg"></p>  
       <p class="item"><img src="img/3.jpg"></p>  
       <p class="item"><img src="img/1.jpg"></p>  
       <p class="item"><img src="img/2.jpg"></p>  
       <p class="item"><img src="img/3.jpg"></p>  
       <p class="item"><img src="img/1.jpg"></p>  
       <p class="item"><img src="img/2.jpg"></p>  
       <p class="item"><img src="img/3.jpg"></p>  
       <p class="item"><img src="img/1.jpg"></p>  
       <p class="item"><img src="img/2.jpg"></p>  
       <p class="item"><img src="img/3.jpg"></p>  
       <p class="item"><img src="img/1.jpg"></p>  
       <p class="item"><img src="img/2.jpg"></p>  
       <p class="item"><img src="img/3.jpg"></p>  
  
    </p>  
</p>  

然后就是css啦

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

就这么简单，试试吧