標籤:logs span containe 建立 margin log img gap 圖片
css代碼
.container{-webkit-column-width:160px;-moz-column-width:160px; -webkit-column-gap:5px;-moz-column-gap:5px;}/*資料區塊 磚塊*/.container div{width:160px;margin:4px 0;}
css寫完了
body中的元素
<div class="container"><div><img src="images/P_00.jpg" /></div><div><img src="images/P_01.jpg" /></div><div><img src="images/P_02.jpg" /></div><div><img src="images/P_03.jpg" /></div><div><img src="images/P_04.jpg" /></div><div><img src="images/P_05.jpg" /></div><div><img src="images/P_06.jpg" /></div><div><img src="images/P_07.jpg" /></div><div><img src="images/P_08.jpg" /></div><div><img src="images/P_09.jpg" /></div><div><img src="images/P_010.jpg" /></div><div><img src="images/P_011.jpg" /></div><div><img src="images/P_012.jpg" /></div><div><img src="images/P_013.jpg" /></div><div><img src="images/P_014.jpg" /></div><div><img src="images/P_015.jpg" /></div><div><img src="images/P_016.jpg" /></div><div><img src="images/P_017.jpg" /></div><div><img src="images/P_018.jpg" /></div><div><img src="images/P_019.jpg" /></div><div><img src="images/P_05.jpg" /></div><div><img src="images/P_06.jpg" /></div><div><img src="images/P_07.jpg" /></div><div><img src="images/P_08.jpg" /></div><div><img src="images/P_09.jpg" /></div><div><img src="images/P_010.jpg" /></div><div><img src="images/P_011.jpg" /></div><div><img src="images/P_012.jpg" /></div><div><img src="images/P_013.jpg" /></div><div><img src="images/P_05.jpg" /></div><div><img src="images/P_06.jpg" /></div><div><img src="images/P_07.jpg" /></div><div><img src="images/P_08.jpg" /></div><div><img src="images/P_09.jpg" /></div><div><img src="images/P_010.jpg" /></div><div><img src="images/P_011.jpg" /></div><div><img src="images/P_012.jpg" /></div><div><img src="images/P_013.jpg" /></div><div><img src="images/P_03.jpg" /></div><div><img src="images/P_04.jpg" /></div><div><img src="images/P_05.jpg" /></div><div><img src="images/P_06.jpg" /></div><div><img src="images/P_07.jpg" /></div><div><img src="images/P_08.jpg" /></div><div><img src="images/P_09.jpg" /></div></div>
這樣就可以實現瀑布流布局;
如果需要添加資料庫中的圖片
使用js建立標籤,添加到.container元素中即可
使用css實現瀑布流布局