CSS Code
. container{-webkit-column-width:160px;-moz-column-width:160px;-webkit-column-gap:5px;-moz-column-gap:5px;} /* Data block brick */.container div{width:160px;margin:4px 0;}
CSS finished
Elements in the body
<div class= "container" ><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div>< IMG src= "images/p_07.jpg"/></div><div></div><div> </div><div></div><div ></div><div></div> <div></div><div></div ><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div>< IMG src= "images/p_011.jpg"/></div><div></div><div> </div><div></div><div ></div><div></div>< Div></div><div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
In this way, the waterfall flow layout can be realized;
If you need to add a picture from the database
Use JS to create tags and add them to the. Container element.
Using CSS to implement waterfall flow layouts