The first step is make list of image like pinterest style. From Dudley Storey post, i tried to make my needs. Okey I try to copy all the code there with change to compatible with firefox ( -moz- ) and chrome ( -webkit- )
<div id="columns">
<figure>
<a href="images/image-gallery-up1.jpg" title="Cinderella wearing European fashion of the mid-1860’s" data-gallery><img src="images/image-gallery-up1.jpg"></a>
<figcaption>Cinderella wearing European fashion of the mid-1860’s</figcaption>
</figure>
<figure>
<a href="images/image-gallery-up-jungle.jpg" title="Cinderella wearing European fashion of the mid-1860’s" data-gallery><img src="images/image-gallery-up-jungle.jpg"></a>
<figcaption>Rapunzel, clothed in 1820’s period fashion</figcaption>
</figure>
<figure>
<img src="images/image-gallery-up-jungle.jpg">
<figcaption>Rapunzel, clothed in 1820’s period fashion</figcaption>
</figure>
<figure>
<img src="images/image-gallery-up1.jpg">
<figcaption>Cinderella wearing European fashion of the mid-1860’s</figcaption>
</figure>
<figure>
<img src="images/image-gallery-up-jungle.jpg">
<figcaption>Rapunzel, clothed in 1820’s period fashion</figcaption>
</figure>
</div>
And the code of CSS is
#columns {
-webkit-column-width:200px;
-moz-column-width: 200px;
column-width: 200px;
-moz-column-gap: 5px;
-webkit-column-gap: 5px;
column-gap: 5px;
width: 90%;
max-width: 1100px;
margin: 50px auto;
}
div#columns figure {
background: #fefefe;
border: 2px solid #fcfcfc;
box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
margin: 0 2px 5px;
padding: 5px;
padding-bottom: 10px;
transition: opacity .4s ease-in-out;
column-break-inside: avoid;
display: inline-block;
}
div#columns figure img {
width:100%; height: auto;
border-bottom: 1px solid #ccc;
padding-bottom: 15px;
margin-bottom: 5px;
}
@media screen and (max-width: 750px) {
#columns { -webkit-column-gap: 0px; }
#columns figure { width: 100%; }
}
The idea are on the colomn-width and colomn-gap. Final result below.
Problem solve.
