Question

我的挑战是尝试使列表网格视图看起来像pinterest类似的布局。我已经用它制作了一些代码......但这还不够。下面的行彼此不适合。

#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

与此同时，我通过网络进行搜索，只发现了以下代码......但我不知道如何实现它。有人可以给我这个小费吗？像tu插入什么？！

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

Answer 1

你需要使用某种jQuery插件来帮助弥补你所看到的所有差距。如James所述，masonry是一个非常受欢迎的选项。另一个插件（没有很多选项/功能）是jQuery Waterfall。两者都有很多例子可以帮助您启动和运行。

Answer 2

您应该将找到的代码插入.css文件，然后从您的html文件链接到它并使用提供的类/ ID（例如＆＃34; .pin＆＃34; ＆＃34;＃columns＆＃34;）在您希望使用您找到的代码进行样式化的元素上

Answer 3

这是实现Pinterest布局的小型库。填充网格从左到右。可以在配置中为每个分辨率自定义列数。列调整大小时的自适应更改。图像可以在引脚的上方或下方。

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

针对pinterest布局样式的CSS代码

3 个答案: