1

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

例如，在这个站点上，网格正在按照我想要的方式折叠。然而，在这个网站上，帖子是按水平排列的行排列的，每行之间都有空格。

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

谢谢！

4

1 回答 1

4

这被称为动态网格或类似 Pinterest 的网格。它被Pinterest推广。

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

这些中的任何一个都可以解决问题。

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之间都有边距。

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

于 2013-01-24T02:59:28.137 回答