pinterest布局样式的CSS代码 [英] CSS code for pinterest layout style

问题描述

我的挑战是试图使列表网格视图看起来像pinterest一样的布局.我已经用它编写了一些代码……但这还不够.下面的行彼此不匹配.

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;
}

它是这样的:

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;
}

推荐答案

您将需要使用某种jQuery插件来帮助弥合您所看到的所有差距.正如 James 所述， jQuery Waterfall .两者都有很多示例，可帮助您入门和运行.

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.

这篇关于pinterest布局样式的CSS代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！