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

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。这些插件中的每一个都提供了工作示例以及代码示例和文档。 Masonry 的简单实现如下所示：

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 的边距。您最终会得到 3 列，每列之间的边距为 10px。

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