3

My challenge is trying to make the listing grid view looking like pinterest similar layout. I've already made a little code with it... but it's not enough. the rows below don't fit each other.

#content .category_grid_view li.featured {  position:relative; -moz-border-radius:3px;  -webkit-border-radius:3px; }
#content .category_grid_view li .featured_img { width:69px; height:72px;     position:absolute; left:15px; top:0px; text-indent:-9009px; }
#content .category_grid_view li p.timing { margin:0; padding:0; }
#content .category_grid_view li p.timing span { color:#000; }
#content .category_grid_view li .widget_main_title { height:25px;overflow:hidden; clear:left;}
#content .category_grid_view li a.post_img {height:auto;width:100%;padding:1%;}
#content .category_grid_view li a.post_img img{height:100%;max-height:100%;width:auto;}
#page .category_grid_view {
width: auto;
padding-left:0px;   
}
#content .category_grid_view li a.post_img {
height:auto;
max-width:100%;
overflow:hidden;
}
#content .category_grid_view li a.post_img img {
margin:0 auto;
display:block;
height:auto;
}
#content .category_grid_view {
margin:-10 0 20px -15px;
padding:0;
width:650px;
clear:both;
}
#content .category_grid_view li {
background: none repeat scroll 0 0 transparent;
float: left;
list-style: none outside none;
margin: -10 0 20px;
padding: 0 0 0 15px;
position: relative;
width: 200px;
}
#content .category_grid_view li.hr {
display: none;
}
#content {
float: left;
overflow: hidden;
padding-left: 5px;
width: 640px;
}
#content .category_grid_view li a.post_img {
display: block;
margin-bottom: 0;
padding: 0;
background: none repeat scroll 0 0 #FFFFFF;
border: 0 solid #E2DFDF;
box-shadow: 0 0 0 #DDDDDD;
height: auto;
width: 100%;
overflow: hidden;
}
#content .category_grid_view li a.post_img img {
height: auto;
overflow: hidden;
width: 100%;
}
#content .category_grid_view li.featured a.post_img {
border: 0 solid #B1D7E0;
}
#content .category_grid_view li .widget_main_title {
padding-top: 7px;
clear: left;
height: 25px;
overflow: hidden;
background: none repeat scroll 0 0 #EBEBEB;
}
#content .category_grid_view li .rating {
background: none repeat scroll 0 0 #EBEBEB;
display: block;
margin: 0px 0;
padding-bottom: 7px;
padding-top: 7px;
}
#content .category_grid_view li p.review {
background: none repeat scroll 0 0 #EBEBEB;
border-bottom: 10px solid #EBEBEB;
border-top: 1px solid #EBEBEB;
color: #EBEBEB;
margin-bottom: 20px;
padding: 5px 0;
}

This is how it looks like:

http://images.findout-macau.com/2013/09/grid-view-rows.png

Meanwhile, i've made search through the web and only found out the following code... yet i don't know how to implement it. Can someone tip me here? Like where tu insert what?!

html, body{
margin:auto;
width:100%;
background-color:#e6e6e6;
}
#wrapper {
width: 100%;
margin: 10px auto;
}
#columns {
-webkit-column-count: 4;
-webkit-column-gap: 10px;
-webkit-column-fill: auto;
-moz-column-count: 4;
-moz-column-gap: 10px;
-moz-column-fill: auto;
column-count: 4;
column-gap: 10px;
column-fill: auto;
}
.pin {
display: inline-block;
background: #FEFEFE;
border: 2px solid #FAFAFA;
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: 0.85;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
Bdalte
  • 47
  • 1
  • 1
  • 7

3 Answers3

6

You'll need to use a jQuery plugin of some kind to help close all those gaps you're seeing. As James mentioned, masonry is a very popular option. Another plugin (without as many options/features) is jQuery Waterfall. Both have lots of examples to help get you up and running.

Community
  • 1
  • 1
essmahr
  • 676
  • 4
  • 15
  • I tried masonry plugin... but my guess is that once this listing grid view is already a CSS from a custom function from the main theme, will i this plugin do something here? – Bdalte Sep 23 '13 at 21:22
  • When using Masonry you may need to change your css styles slightly to get it to function. Masonry will apply itself to all the elements inside a specific container. [Here](http://masonry.desandro.com/#getting-started) is a quick guide on getting started. If you're using a theme you might need to remove or change some of the default html or css to make it work. I looked at the site and there's nothing I see that would cause it not to work. – essmahr Sep 24 '13 at 00:12
  • This might definitly be the right answer to my starting issue... but for me it's more than what i understand from programing. Still i appreciate a lot your effort, but i don't think i can go ahead with it. Unless you have other tips for a newbie like me. – Bdalte Sep 24 '13 at 09:53
1

You should insert the code that you have found in to an .css file, then link to it from your html file and use the classes/id's provided (eg. ".pin" "#columns") on the elemts you want to stylize with the code you found

user2209644
  • 701
  • 1
  • 9
  • 21
  • I'm sorry for not being able to go further with your solution, it's just that i'm more newbbie than that. I've made a search and found out all css i have regarding the listing grid... can you tip me here? million thanks – Bdalte Sep 23 '13 at 21:15
1

This is small library which implements Pinterest layout. Filling the grid goes from left to right. Count of columns can be customized in config for each resolution. Columns adaptive changes on resize. Image can be at up or down of pin.

https://github.com/yury-egorenkov/pins-grid

Yury Egorenkov
  • 11
  • 1