自动折叠网格主题中的帖子之间的垂直间距

Question

我正在尝试为我的wordpress网站制作一个自定义的基于网格的主题。我想做的一件事就是使它在同一列中的帖子之间的垂直间距自动折叠，这样即使帖子的高度不同，它们之间也没有空的空间。

例如，在this site上，网格正在折叠我想要的方式。但是，在this site上，帖子排列在水平对齐的行中，每行之间有空格。

是否有用于制作帖子的技术名称，如第一个示例网站中那样？我至少在寻找一个可以谷歌学习如何去做的术语...但更好的是一个代码示例，它将展示如何制作一个以这种方式自动排列的网格。

谢谢！

Answer 1

这称为动态网格，或者可能是类似Pinterest的网格。它由Pinterest推广。

基本上，单独使用CSS和HTML无法做到这一点。需要使用一些Javascript或服务器端处理来处理这种类型的网格。我建议使用Javascript并查看许多jQuery插件中的一个，这些插件完全符合您的要求（请注意，您链接的第一个网站使用插件进行布局）：

• http://masonry.desandro.com/ （您链接的第一个网站使用的内容）
• http://www.wookmark.com/jquery-plugin
• http://www.inwebson.com/jquery/blocksit-js-dynamic-grid-layout-jquery-plugin/
• http://yconst.com/web/freetile/

任何这些都应该可以解决问题。

Masonry 您是否使用CSS设置容器宽度和块之间的间距。您可以在Javascript中指定所需的列宽。块宽度和间距的计算将确定容器中有多少列。

Wookmark 和 BlocksIt 具有类似的配置选项。它们允许您指定容器宽度，然后指定块宽度。在它和偏移（块之间的距离）之间你可以安排它，使你最终得到3个相同宽度的列。

开箱即用的

Freetile 不支持相同宽度的列（其功能之一），但是您可以通过一点点完成同样的事情CSS和/或直接修改插件。

这里的主要部分是设置其中一个插件并正常工作。一旦到位，您只需要根据自己的喜好调整CSS。这些插件中的每一个都提供了工作示例以及代码示例和文档。砌体的简单实现如下：

HTML：

<div id="grid-container">
    <div class="post">...</div>
    <div class="post">...</div>
    <div class="post">...</div>
    <div class="post">...</div>
    <div class="post">...</div>
</div>

CSS：

#grid-container {
    width: 940px; //width of your container
}
.post {
    margin: 10px; //spacing between each block/post
}

使用Javascript：

$('#grid-container').masonry({
    itemSelector: '.post', //selector for each block
    columnWidth: 300       //width of your columns
});

每个街区帖子都是300px宽，10px边距为10px。您最终会得到3列，每列之间有{{1}}个边距。

所列出的每个插件都是以个人/商业用途（参见每个插件的各自许可）的方式获得许可，所以不用担心。