Styling Image List Pinterest Like Using CSS

I have developing wordpress gallery plugin. It was decided when no find the gallery with pinterest style. When i found, it was premium plugin.

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.

What is the meaning of success in your mind?

Follow your heart, follow the things that really matters to you, if you do that, you will become a big success. - Tim Draper - 

1 tahun, 5 tahun, 20 tahun yang akan datang, akan jadi apa dirimu tergantung dengan apa yang kamu lakukan hari ini. Setiap individu mempunyai pandangan yang berbeda soal arti dari kata sukses. Menurut saya sukses itu bukan tentang seberapa banyak materi yang di punyai, tapi tentang bagaimana menikmati hidup dan seberapa besar berpengaruh terhadap lingkungan.

Berikut adalah sukses menurut versi saya.

Berdasarkan Materi

Sukses adalah ketika saya telah mempunyai rumah, mobil dan dapat menghidupi keluarga serta saudara-saudara saya.

Berdasarkan Karir

Sukses adalah ketika saya mempunyai sebuah perusahaan sehingga dapat memberikan pekerjaan yang layak bagi orang-orang di sekitar saya.

Berdasarkan Sosial

Sukses adalah ketika saya dapat membiayai yayasan pendidikan yang baik dengan metode pengajaran yang tepat. Tanpa harus memungut biaya yang dapat membebani siswa. Serta menjadi pengajar sebagai pengabdian kepada bangsa dan negara.

Berdasarkan Lokasi

Sukses adalah ketika saya berhasil membuat orang tua saya bangga dengan profesi saya dan dekat dengan keluarga besar saya (Demak).

Berdasarkan Bidang Pekerjaan

Sukses adalah ketika saya berhasil membangun Startup berbasiskan teknologi website berada pada bidang pariwisata. Ini merupakan janjiku pada Achid Dwi Swandana, teman kuliah S1 di UNNES.

Saya sedang mengejar ini agar semua menjadi nyata. Orang bilang kesempatan tidak datang dua kali, bagi saya kesempatan meruapakan efek dari semua usaha yang telah kamu lakukan sebalumnya.

Jika saya berlebihan ingatkan aku untuk tidak egois ya ta..