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>