css3实现瀑布流

html

<div class="box-wrapper">
    <div style="margin-top:0px" class="box"></div>
    <div class="box spe"></div>
    <div class="box spe"></div>
    <div class="box spe"></div>
    <div class="box spe"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box spe"></div>
    <div class="box spe"></div>
</div>

css

 .box {
	height:123px;
	padding:1em;
	margin-top:1em;
	-moz-page-break-inside:avoid;
	-webkit-column-break-inside:avoid;
	break-inside:avoid;
	border:1px solid #000;
	background:#909090;
}
.spe {
	height:225px;
}
.box-wrapper {
	-moz-column-count:4;
	/* Firefox */
        -webkit-column-count:4;
	/* Safari 和 Chrome */
        column-count:4;
	-moz-column-gap:1em;
	-webkit-column-gap:1em;
	column-gap:1em;
}