Pinterest like list

[OndrejH]

There were questions about how to make simple css pinterest like styling of the list.
Let me share few lines of code what works for me - based on div template (/www/components/com_fabrik/views/list/tmpl/) .
Sample code is attached.
3 columns
2 columns
4 columns

Enjoy fine tuning. Any comments on potential improvements are welcome.

 

[OndrejH]

Hi Chozma,

Thank you for your like on this one.
I have few more lines of advice. Image width should be set exact or wider than total width divided by the lowest number of columns (set the value in css code) so it would always be displayed to fit to the width of box.
Images are not uploaded by ajax. Uploading more than one file (by ajax) would throw <li> list and that would disable use of css. Responsiveness of columns is also set by css. I did few little changes in that piece of code:

 

[OndrejH]

/* CSS-Only Pinterest Style Columns Layout */
/* http://cssdeck.com/labs/css-only-pinterest-style-columns-layout */
/*
body {
    background: url(http://subtlepatterns.com/patterns/scribble_light.png) ;
}*/
 
 
#wrapper {
    width: 90%;
    max-width: 1100px;
    min-width: 800px;
    margin: 50px auto;
}
 
#columns {
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    -webkit-column-fill: auto;
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    -moz-column-fill: auto;
    column-count: 3;
    column-gap: 15px;
    column-fill: auto;
}
 
.pin {
    display: inline-table;
    background: #FEFEFE;
/*    border: 2px solid #FAFAFA; */
    border-radius: 15px;
    box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
    margin: 0 2px 15px;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    padding: 15px;
    padding-bottom: 5px;
    background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
    opacity: 1;
   
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
}
 
.pin img {
    width: 100%;
    border-bottom: 1px solid #ccc;
    padding-bottom: 15px;
    margin-bottom: 5px;
}
 
.pin p {
    font: 12px/18px Arial, sans-serif;
    color: #333;
    margin: 0;
    margin-bottom: 15px;
}
 
@media (max-width: 599px) {
    #columns {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }
}
 
@media (min-width: 599px) {
    #columns {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }
}
 
@media (min-width: 770px) {
    #columns {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
}
 
@media (min-width: 960px) {
    #columns {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
    }
}
 
@media (min-width: 1200px) {
    #columns {
        -webkit-column-count: 4;
        -moz-column-count: 4;
        column-count: 4;
    }
}

 

[OndrejH]

working example:

http://www.stolmir.cz/cs/pages/info